HTML table width fit to browser window

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

 <table width="100%">

Answer 4

...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.