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

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;. 根据CSS 2.1 规范和CSS Tricks，由于没有为单元格或列指定宽度，因此表格总宽度分布在两个单元格之间。

现在，考虑以下代码（相同，但在第二个单元格中有更多内容）：http : //jsfiddle.net/8vzRb/1/

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

我的问题是：是否有任何标准方法可以根据单元格的内容确切地知道在此示例中每个单元格将占用多少空间，作为总表格宽度的百分比或其他值？这个计算是如何工作的，它是标准的吗？

（我知道如何解决这个问题：您可以简单地width: 200px在 colgroup 中的列或表格第一行的单元格上设置 a或其他内容；我只是好奇这是如何工作的。后续问题：为什么width: 200px;在http://jsfiddle.net/bQ6vH/1/中设置like 会改变左侧单元格的宽度，但设置 min-width: 100px; 不会？）

Answer 1

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

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

我在你的小提琴里帮你清理了一下。但一般来说，我会这样使用 colgroups

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

参见演示