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?)