I've got a table with two columns. I set the width of the first column by settings its header's width to 30%:
#TableFirstHeader
{
width: 30%;
}
That works great, but if I try to set the width of the second header to 65%:
#TableSecondHeader
{
width: 65%;
}
it is simply ignored. I can set that value to anything, and the second column always stretches to the end of the table.
All I really want is about a 5% gap between the second column and the right side of the table.
I've tried creating开发者_运维技巧 an empty column by setting a header of width 5% with nothing in it, but that doesn't do anything.
How can I get that column to use only 65% of the total width available (or like 90% of the width available to it, that would be fine, too)?
<style type="text/css">
table#YourTableId { width:95%; }
th#TableFirstHeader { width:31.6%; }
th#TableSecondHeader { width:68.4%; }
</style>
The second th does not necessarily need to be assigned a width. Also you could use
table#YourTableId td:first-child { width:31.6%; }
instead. Matter of taste.
Edited from here:
Since you have clarified in the above comment, that - for whatever reason - the rows need to be 100% the table's container's width, I second jeroen's solution if the last column may have extra padding.
If you must have the second column at 65% the table's width (and not 70% with 5% right padding):
<style type="text/css">
th#TableFirstHeader { width:30%; }
th#TableSecondHeader { width:65%; }
th#TableThirdHeader { width:5%; }
div#Stretch { width:100%; }
</style>
<table>
<tr>
<th id="TableFirstHeader">Some Content</th>
<th id="TableSecondHeader">Some Content</th>
<th id="TableThirdHeader"><div id="Stretch"></div></th>
</tr>
</table>
An empty third column would collapse. The empty div with 100% width of it's container prevents that behavior.
You can´t, all columns of a table combined make up the width of the table.
I don´t know what you are trying to achieve exactly, but perhaps you can add a right padding on the cells of the last column to get the effect you want or something similar.
精彩评论