How are table cell widths calculated in html?

Question

Consider the following code: 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>

The way that the table is rendered here makes sense to me, since there are no widths set on anything and the table is table-layout: fixed;. According to the CSS 2.1 spec and also CSS Tricks, since there are no widths specified for the cells or the columns, the total table width is distributed between the two cells.

Now, consider the following code (same, but with more content in the second cell): http://jsfiddle.net/8vzRb/1/

In this case, since there is more content in the second cell it takes up more room. But, and I quote the CSS 2.1 spec on this, the widths of the two cells should be divided in the following way: "Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing)." Clearly, these columns are not equal: the right one takes up much more space than the left one.

My question is this: is there any standard way to know exactly how much space, as a percentage or some other value of the total table width, will be taken up by each cell in this example, depending on the content of the cells? How does this calculation work, and is it standard?

(I know how to fix the issue: you can simply set a width: 200px or something on the columns in a colgroup OR on the cells in the first row of the table; I'm simply curious as to how this works. Follow-up question: why does setting a width: 200px; like in http://jsfiddle.net/bQ6vH/1/ change the width of the left cell, but setting a min-width: 100px; does not?)

Answer 1

This question was answered here : How is column width determined in browser?

Now, to help you solve this issue, consider the way you are using colgroups.

I cleaned it up a little for you in your fiddle. But generally, I'd use the colgroups this way instead

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

See DEMO