Question

请考虑以下代码：http://jsfiddle.net/R3AKT/1/。

<table class="main">
  <colgroup><col class="votes"><col></colgroup>
  <tr>
    <td>Votes</td>
    <td>Comments</td>
  </tr>
  <tr>
    <td>
      <p class="vote-desc">Some long name, really long, like really super long</p>
      <p class="vote-desc">Another long name, really long</p>
    </td>
    <td>
      <p class="comment">A really, really, really, really, really really really really really, really long comment.</p>
     </td>
  </tr>
</table>

这里呈现表格的方式对我来说很有意义，因为没有任何宽度设置在任何内容上，表格为table-layout: fixed;。根据{{3}}和CSS 2.1 spec，由于没有为单元格或列指定宽度，因此总表格宽度分布在两个单元格之间。

现在，请考虑以下代码（相同，但第二个单元格中包含更多内容）：CSS Tricks

在这种情况下，由于第二个单元格中有更多内容，因此占用更多空间。但是，我引用CSS 2.1规范，两个单元格的宽度应按以下方式划分：“任何剩余的列均等地划分剩余的水平表空间（减去边框或单元格间距）。”显然，这些列并不相同：正确的列占用的空间比左列要多得多。

我的问题是：有没有任何标准的方法可以确切地知道在这个例子中每个单元格将占用多少空间，作为总表格宽度的百分比或其他值，具体取决于细胞？这个计算是如何工作的，是标准的吗？

（我知道如何解决这个问题：你可以简单地在一个colgroup中的列上或者在表格第一行的单元格上设置width: 200px或者其他东西;我只是好奇如何后续问题：为什么在http://jsfiddle.net/8vzRb/1/中设置width: 200px;更改左侧单元格的宽度，但设置最小宽度：100px;不是？）

Answer 1

这个问题在这里得到了解答：How is column width determined in browser?

现在，为了帮助您解决此问题，请考虑使用colgroups的方式。

我在你的小提琴里为你清理了一点。但一般来说，我会以这种方式使用colgroups

  <colgroup width="50%" />
  <colgroup width="50%" />

请参阅DEMO

如何在html中计算表格单元格的宽度？

1 个答案: