Take a look at this code snippet here: 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 in which the table is displayed here is logical to me, given that there are no specific widths set and the table has a table-layout: fixed; attribute. As indicated by the CSS 2.1 specification and CSS Tricks, when no widths are defined for the columns or cells, the total table width is distributed between the two cells.
Now, let's examine this code (same as above, with additional content in the second cell): http://jsfiddle.net/8vzRb/1/
In this scenario, the second cell occupies more space due to the increased content. According to the CSS 2.1 spec, columns should divide the remaining horizontal table space equally: "Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing)." However, in this instance, the columns are not proportionate: the right column occupies significantly more space than the left one.
My inquiry is this: Is there a universally accepted method to calculate the exact space taken up by each cell, as a percentage or another value of the total table width, based on the cell content? How is this calculation performed, and is it standardized?
(I understand how to resolve the issue by setting a width: 200px on the columns in a colgroup or on the cells in the first row of the table; I am mainly curious about the mechanics behind it. Additionally, why does specifying a width: 200px; like in http://jsfiddle.net/bQ6vH/1/ impact the width of the left cell, whereas setting a min-width: 100px; does not?)