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

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

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

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

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

Answer 1

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

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

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

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

见DEMO