This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Stylesheets > November 2005 > how to make a TD take up remaining width?





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author how to make a TD take up remaining width?
smilla

2005-11-13, 10:45 pm

Hi,

I'm trying to use css to set the widths of cells and tables, for
multiple tables.

The width of the tables is 450px, set in stylesheet.

The number of columns and widths vary, but I'd like one column to
stretch and take up any remaining space.

I've set the width of the table to 450px in my stylesheet. And TD's all
have classes that set their width to a certain amount of pixels in an
external stylesheet, except for the one column that needs to stretch.
If I set that one column to width="100%" the table exceeds 450px and
breaks my layout.

This is what is would look like, for example:

<table class="master">
<tr>
<td class="date"></td>
<td class="type"></td>
<td class="total"></td>
</tr>
</table>

<table class="master">
<tr>
<td class="num"></td>
<td class="date"></td>
<td class="location"></td>
<td class="type"></td>
</tr>
</table>

stylesheet:

table.master {width:450px}
table.master td.num {width:45px}
table.master td.location {width:90px}
table.master td.total {width:135px}
table.master td.type {width:60px}
table.master td.num {width:100%}

Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews