Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login




Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.
Jobs from Indeed

Link To This Forum!

Partner Button
Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

HTML, XHTML & CSS FAQ

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)?
Posted: 25 Nov 03 (Edited 16 Jun 04)

Here is an example:

<table border=1 width=183 style='table-layout:fixed'>
 <col width=67>
 <col width=75>
 <col 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>

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 'table-layout:fixed' 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:

<style>
  td {overflow:hidden;}
</style>


Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close