开发者

How can I set the width of the last column of an html table to a percentage of the available width?

开发者 https://www.devze.com 2023-03-07 12:44 出处:网络
I\'ve got a table with two columns. I set the width of the first column by settings its header\'s width to 30%:

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消