Designing a table which shrinks when browser size is adjusted

Question

I have a HTML table which I want to make fluid so that when it resizes, the table collapses/shrinks, just like the table on http://sis.bristol.ac.uk/~cckhrb/webdev/code/site/fluid.htm.

How can I design such a table?

Thanks

Answer 1

Just give the <table> element a width of 100%.

table {
    width: 100%;
}

Answer 2

Actually the example table doesn't have width: 100%.

Table resizing is the default in HTML you don't need to "do anything" to design such a table. Most importantly don't set any widths.

IMHO the over-designing and fixation on "pixel perfect design" goes against the basic nature of HTML rendering. Just let it flow.