Fixed column width

[wrathyimp]

Hi,

I need to fix a the column width regardless of the browser resizing.
I have a table with 4 columns with the following sizes:
col 1= 170px (menu col)
col 2= 160px (sub menu col)
col 3= 30px (spacer)
Col 4= 728px (content)

I Need to have fixed width size on the first 3 columns, the content column can be adjustable.

I have the following table code:

<table align="left" id="TABLE1" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed; overflow-x:hidden">
<col width="170" />
<col width="160" />
<col width="30" />
<col width="728" />
<%--TOP BLACK STRIP --%>
<tr>
<td height="10" style="width: 170px; height: 10px; background-color: black;">
<img src="images/topspace.gif" width="170" height="10" /> </td>
<td height="10" style="width: 160px;; height: 10px; background-color: black">
<img src="images/topspace.gif" width="160" height="10" /> </td>
<td height="10" style="width: 30px; height: 10px; background-color: black;">
<img src="images/topspace.gif" width="30" height="10" /> </td>
<td height="10" style="width: 728px; height: 10px; background-color: black;">
<img src="images/topspace.gif" width="360" height="10" /> </td>
</tr>
<tr>
<td align="right" style="width: 170px;" rowspan="2" valign="top">
</td>
<td style="width: 160px; height: 40px; background-color: black">
</td>
<td style="width: 30px; height: 40px">
</td>
<td align="left" rowspan="1" style="height: 200px" valign="bottom">
<asp:Image ID="header1" runat= server ImageUrl="~/Images/header/en/header.jpg" />
</td>
</tr>
<tr>
<td style="width: 160px;; height: 100%; background-color: black;">
</td>
<td style="width: 30px; height: 100%; " >
</td>
<td style="width: 728px; height: 233px;"valign="top" >&nbsp;</td>
</tr>
<tr>
<td style="width: 170px;; background-color: black;">
</td>
<td style="width: 160px;; background-color: black;">
</td>
<td style="width: 30px; background-color: black;">
</td>
<td style="width: 728px; background-color: black;"><div id="global"><p style="text-align: center; color: white;">
Copyright &copy; 2009. All rights reserved.
</p></div>
</td>
</tr>
</table>

Thanks

 

[ChrisHunt]

Col 4= 728px (content)

I Need to have fixed width size on the first 3 columns, the content column can be adjustable.

So, which is it? Do you want to fix the width of the fourth column or don't you?

Other than that, you code looks like it ought to work. What problem are you having with it?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[wrathyimp]

Chris,

Col 4, need to be like 100%, expandable, not fixed, but goes till the end near the scroll bar.

 

[ChrisHunt]

Two things then:

1) You only need to declare the widths of one row of cells - all the others will follow suit

2) If you define widths for the first three columns and leave the lastone undefined, it will expand/contract to fill the available space.

So something like this should work:

<table style="width:100%">
<tr>
<td style="width: 170px;">col 1</td>
<td style="width: 160px;">col 2</td>
<td style="width: 30px;">3</td>
<td>content</td>
</tr>
<tr>
<td>Look</td>
<td>Ma</td>
<td>!</td>
<td>No column widths!</td>
</tr>
</table>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[wrathyimp]

Thanks for your comments,

But I got my problem identified:
<table align="left" id="TABLE1" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" style="table-layout:fixed; overflow-x:hidden">
<Table width="100%">

the table width set to 100% was causing the auto adjustable column widths. Just removed its, and got its fixed.

For the last column, we need to define the width as 100%, it will complete the rest page.

Thanks again.