HTML表格宽度百分比，表格行等分答案

【问题标题】：HTML Table width in percentage, table rows separated equallyHTML表格宽度百分比，表格行等分
【发布时间】：2011-12-03 18:32:11
【问题描述】：

当我在 html 中创建一个表格时，一个宽度为 100% 的表格，如果我想将所有单元格 (tds) 分成相等的部分，我是否必须为每个单元格输入宽度百分比？我“有义务”这样做吗？

例如：

<table cellpadding="0" cellspacing="0" width="100%" border="0">
   <tr>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
      <td width="25%"></td>
   </tr>
</table>

或者以下也可能是正确的程序，如果我希望每个 tds 均等划分，则不要在每个 tds 中写入宽度：

<table cellpadding="0" cellspacing="0" width="100%" border="0">
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

我知道这两种方式都适用，但我只想知道“合法”的方式。

【问题讨论】：

标签： html html-table

【解决方案1】：

使用表格上的属性table-layout:fixed; 获得等间距的单元格。如果一列设置了宽度，那么无论内容是什么，都将是指定的宽度。没有设置宽度的列将在它们之间划分剩余的空间。

<table style='table-layout:fixed;'>
    <tbody>
        <tr>
            <td>gobble de gook</td>
            <td>mibs</td>
        </tr>
    </tbody>
</table>

只是把它扔在那里，你也可以使用<colgroup><col span='#' style='width:#%;'/></colgroup>，它不需要重复每个表格数据的样式或给表格一个ID以在样式表中使用。我认为在第一行设置宽度就足够了。

【讨论】：

这应该是公认的答案。无论行中有多少个单元格，都将保持相同的宽度。
<colgroup> 在 HTML4.01 中已弃用，在 HTML5 中已过时 - developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup
colgroup 和 col 的几个属性已被弃用，但标签本身及其span 属性不被弃用。这些属性可能已被弃用，因为它们都是纯粹的风格，这就是 CSS 的用途，而 span 是显示正确结构所必需的，无论是否存在 CSS。
colgroup 和 col 的几个属性已被弃用，但标签本身及其span 属性不被弃用。这些属性可能已被弃用，因为它们都是纯粹的风格，这就是 CSS 的用途，而 span 是显示正确结构所必需的，无论是否存在 CSS。

【解决方案2】：

您需要输入每个单元格的宽度百分比。但是等等，有一个更好的方法可以做到这一点，它叫做 CSS：

<style>
     .equalDivide tr td { width:25%; }
</style>

<table class="equalDivide" cellpadding="0" cellspacing="0" width="100%" border="0">
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

【讨论】：

有趣的谢谢。所以如果我有一个分成 3 个单元格的表格，我不能使用 css 宽度属性，我必须使用旧方法是吗？
为什么不呢？使用 3 个单元格，您只需将宽度百分比更改为 33% 而不是 25%。不是绝对完美，但差不多。
如果我有动态内容，并且不知道内容会占用多少空间，不输入宽度并让浏览器动态划分单元格与它们占用的空间是否可以？
a/ 如果您不知道要处理多少个单元格，但仍想保持它们相等，我将帮助您使用 javascript。 b/ 如果你不指定宽度，那么浏览器将分配空间以使表格的高度最小。（因此，数据多的单元格会比数据少的单元格大）
遗憾的是，Outlook 仍然在推动电子邮件的祖传做法......

【解决方案3】：

是的，您需要为每个单元格指定宽度，否则他们将尝试对其“智能”并将 100% 分配给他们认为最需要的单元格。内容多的单元格会比内容少的单元格占用更多的宽度。

为确保每个单元格的宽度相等，您需要明确说明。要么按照你已有的方式去做，要么使用 CSS。

table.className td { width: 25%; }

【讨论】：

【解决方案4】：

你可以试试这个，我会用 CSS 来做，但我想你想要没有 CSS 的表格。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <body leftmargin=0 rightmargin=0>
      <table cellpadding="0" cellspacing="0" width="100%" border="1" height="350px"> 
         <tr>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
            <td width="25%">&nbsp;</td>
         </tr>
      </table> 
   </body>
</html>

【讨论】：

【解决方案5】：

这绝对是对这个问题最干净的答案：https://stackoverflow.com/a/14025331/1008519。与table-layout: fixed 结合使用时，我经常发现<colgroup> 是一个很好的工具，可以让列按您的意愿行事（请参阅codepen here）：

table {
 /* When set to 'fixed', all columns that do not have a width applied will get the remaining space divided between them equally */
 table-layout: fixed;
}
.fixed-width {
  width: 100px;
}
.col-12 {
  width: 100%;
}
.col-11 {
  width: 91.666666667%;
}
.col-10 {
  width: 83.333333333%;
}
.col-9 {
  width: 75%;
}
.col-8 {
  width: 66.666666667%;
}
.col-7 {
  width: 58.333333333%;
}
.col-6 {
  width: 50%;
}
.col-5 {
  width: 41.666666667%;
}
.col-4 {
  width: 33.333333333%;
}
.col-3 {
  width: 25%;
}
.col-2 {
  width: 16.666666667%;
}
.col-1 {
  width: 8.3333333333%;
}

/* Stylistic improvements from here */

.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}
table {
  width: 100%;
}
table > tbody > tr > td,
table > thead > tr > th {
  padding: 8px;
  border: 1px solid gray;
}

<table cellpadding="0" cellspacing="0" border="0">
  <colgroup>
    <col /> <!-- take up rest of the space -->
    <col class="fixed-width" /> <!-- fixed width -->
    <col class="col-3" /> <!-- percentage width -->
    <col /> <!-- take up rest of the space -->
  </colgroup>
  <thead>
    <tr>
      <th class="align-left">Title</th>
      <th class="align-right">Count</th>
      <th class="align-left">Name</th>
      <th class="align-left">Single</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
      <td class="align-right">19</td>
      <td class="align-left">Lisa McArthur</td>
      <td class="align-left">No</td>
    </tr>
    <tr>
      <td class="align-left">This is a shorter title</td>
      <td class="align-right">2</td>
      <td class="align-left">John Oliver Nielson McAllister</td>
      <td class="align-left">Yes</td>
    </tr>
  </tbody>
</table>


<table cellpadding="0" cellspacing="0" border="0">
  <!-- define everything with percentage width -->
  <colgroup>
    <col class="col-6" />
    <col class="col-1" />
    <col class="col-4" />
    <col class="col-1" />
  </colgroup>
  <thead>
    <tr>
      <th class="align-left">Title</th>
      <th class="align-right">Count</th>
      <th class="align-left">Name</th>
      <th class="align-left">Single</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align-left">This is a very looooooooooong title that may break into multiple lines</td>
      <td class="align-right">19</td>
      <td class="align-left">Lisa McArthur</td>
      <td class="align-left">No</td>
    </tr>
    <tr>
      <td class="align-left">This is a shorter title</td>
      <td class="align-right">2</td>
      <td class="align-left">John Oliver Nielson McAllister</td>
      <td class="align-left">Yes</td>
    </tr>
  </tbody>
</table>

【讨论】：

colgroup 自 HTML4.01 起已弃用，在 HTML5 中已过时。我的理解是我们应该在 CSS 中使用td:nth-of-type(3)。
colgroup 标记上的许多属性已被弃用，但 colgroup 本身却没有：developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup W3 建议使用 CSS 代替这些（包括 width）：@ 987654324@我会相应地更新答案