HTML table - fixed width columns and horizontal scroll

Question

I need to create an HTML table which has fixed column widths, say 200px for each column. If the table exceeds the horizontal width of the browser viewport then there should be horizontal scroll to view the columns which are off-screen. As the table is being dynamically generated from a database there will be an indeterminate number of columns each time, so the total table width cannot be defined in advance.

In summary, I am looking for a way to just set a fixed column width and then tell the table to horizontally scroll if it runs out of horizontal space. Any suggestions would be appreciated!

Answer 1

I have a jsFiddle example of what is possible: jsFiddle table scrolling

Tables cannot scroll themselves (because they never overflow), but if you put a wrapper around it users can scroll horizontally (or vertically). However: If you cannot give your table a fixed width, it will just fill as much space it can find. But it does not overflow it's parent. Even though the table-cells are given a fixed width.

But my guess is, if you generate those cells with this width, you can calculate the total width the table should be. Use this value (I.E 1000px) to create an overflow on the wrapper.