Is it better to use fixed or percentage column width for an HTML Table?

Question

I'm displaying some tabular data on my website so I decided to use some tables. Is it a best practice to use fixed width for your table columns (ie, 100px) or to use percentage based widths?

Answer 1

I would not recomment fixed widths, as the browsers text size may be different. The correct thing is to do nothing at all! Leave the table to size itself. Forcing the table to be 100% wide is an option, but can leave alot of whitespace.

How big will the table be on my mobile phone, TV set or desktop PC? The more you force a layout the worse it looks on unexpected platforms.

Answer 2

I agree with Quigley, however the "right" approach depends very much on your specific context. If you have to just display plain data on a website, basically just printing out HTML formatted data, I would also leave the table as it is. What you should do is to set it's width to 100% s.t. it expands on the whole width of the page. If it resides inside another container (such as div or other tag), it will expand to the width of that container.

If however you want to have your table just expand to a certain width, I would go for percent values instead of fixed tables, mainly because of the fact that your users will have different display sizes and resolution and therefore the according browser window with may vary. In such a case I would however consider attributes such as min-width that specifies the minimum width that your table will get. The attribute works perfectly on Firefox, Safari etc.. however on IE (as usual) you have to do a trick to achieve min-width by adding something like the following to your CSS class (which you add to the enclosing container of your HTML table or to the table itself):

width: expression( this.scrollWidth < 70 ? "70px" : "auto" );

This is just an example that specifies a minimum width of 70px, otherwise it doesn't set any width. You can customize it to your needs.

Answer 3

Fixed pixel widths are definitely the worst option. Percentages are much better. If you want to define column widths relative to other elements on your page, the best option is to use CSS and a unit like em that is relative to the text size.

Answer 4

For tabular data, I think relative (percentage) should be good.

But if u feel screen size may screw up your tables, go for the fixed approach.

Answer 5

I use(d) proportional widths extensively with HTML that has to work in browsers and CSS2XSLFO.

However Firefox 3.x has removed support for PCW widths in table columns.

See https://bugzilla.mozilla.org/show_bug.cgi?id=333352

So you'll have to use % widths.

I never use fixed widths (such as 50px), however I do use em or ex units in addition to pcw or percentage widths.