Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to create a table with fixed-width columns regardless of contents, and/or the type of browser in use (e.g. IE, NN, Opera)?

Table Formatting

How to create a table with fixed-width columns regardless of contents, and/or the type of browser in use (e.g. IE, NN, Opera)?

by  medic  Posted    (Edited  )
Here is an example:
[tt]
<table border=1 [color blue]width[/color]=183 [color blue]style[/color]='table-layout:fixed'>
<[color blue]col[/color] width=67>
<[color blue]col[/color] width=75>
<[color blue]col[/color] width=41>
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
</tr>
<tr>
<td>Row 1</td>
<td>Text</td>
<td align=right>1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Abcdefg</td>
<td align=right>123</td>
</tr>
<tr>
<td>Row 3</td>
<td>Abcdefghijklmnop</td>
<td align=right>123456</td>
</tr>
</table>
[/tt]
Notice how a very long entry does not cause a column to expand.

There are three (3) elements involved here to maintain cross-browser consistency.
1) use of width attribute in the table tag
2) use of [color blue]'table-layout:fixed'[/color] property in the style attribute of the table.
3) use of col tags to designate column widths

Make sure the value of the width attribute of the table tag is equal to the total of the width attributes of the col tags.

The 3 elements altogether is redundant if you are using IE. But this approach is needed to take care of the way some browsers like NN behaves differently when specifying column widths.

There are other ways to accomplish this, but this approach is the *easiest* to maintain, especially if you frequently add and delete table rows and/or columns. You don't have to put style sheet properties on every TD tags.

NOTE:

I used IE6, NN6, Opera7 and Firefox 0.9 to test this. Users of Netscape and Firefox may not like to see table cells with overflowing long texts (because of fixed column-widths), so I updated this FAQ to include the following code in the CSS style definition inside the <HEAD> tags or in the external CSS file:
[color blue]
<style>
td {overflow:hidden;}
</style>
[/color]
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top