Take the 2-minute tour ×

Given a HTML table with some data that may be either narrower or wider than the browser window,

In the former case I know how to make it expand to fill the full width.

In the latter case, how do you make it squash (by truncating some columns, not by wordwrap) to fit within the available width?

share|improve this question

4 Answers 4

up vote 1 down vote accepted

Well, your question is difficult to answer. The easiest way I think for doing that is using Yahoo User Interface Library, it has a component (among many others) called DataTable in which you can programmatically add or remove columns. Here's an example that may help you.

PS: Check the other components, YUI uses just javascript and some of them are really cool.

share|improve this answer

If by "truncating some columns" you mean truncating their contents, you can always make all TDs overflow: hidden, with a fixed height.

If, on the other hand, you want to get rid of columns altogether, then you´ll need a JavaScript solution that detects which columns fall outside the view and sweep them out.

share|improve this answer

to expand the table to the full browser widht just do this:

 <table width="100%">
share|improve this answer
This won´t truncate anything... he´s asking to avoid word wrapping and get contents/columns truncated. –  Seb May 3 '09 at 17:39

...how do you make it squash (by truncating some columns, not by wordwrap) to fit within the available width?

I suggest setting the table width to n% and also set width for the td's in percentages which when summed together will give the width of the table.

That however will cause the words to wrap within the td's.

share|improve this answer
He said ‘by truncating some columns, not by wordwrap’. This solution doesn't help when the contents of the cells cannot be further wrapped. –  Török Gábor May 3 '09 at 17:53

Your Answer


