Reputation: 2743
Basically I have a <table>
taking up the whole available width of the screen. Sometimes I might have many cells, thus providing a base width to each <col>
is helpful, to make sure it won't truncate badly.
I also, no matter the case, have a checkbox as the first column. I always want this to have a 31px width (precisely 31px). I'm okay if the rest of the cells don't take their precise width, but something like a percentage of the available space, based on the specified width, something it seems to do internally right now.
Problem is, if the <table>
takes the whole width of the screen (and i need it to take the whole width of the screen), and I happen to have a few coulmns (let's say 4 columns) all with a defined width, the checkbox column will be lengthier:
Here's the fiddle: http://jsfiddle.net/7wwp53aw/2/
I also included in the fiddle the desired table look.
Upvotes: 0
Views: 191
Reputation: 579
Since you gave the table a width (100%) there is no reason to give every cell a width. Leave the width for the cells where you don't care and it works:
http://jsfiddle.net/7wwp53aw/7/
<colgroup>
<col style="width: 31px;">
<col>
<col>
<col>
</colgroup>
Upvotes: 1
Reputation: 196306
You need to allow at least one of the columns to be free of width.
If they all have a width defined then it is used as a ratio of the whole table to use..
<colgroup>
<col style="width: 31px;">
<col>
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
Or you can leave all but one, so that they get auto-width based on contents..
<colgroup>
<col style="width: 31px;">
<col>
<col>
<col>
</colgroup>
Demo at http://jsfiddle.net/gaby/7wwp53aw/8/
Upvotes: 2