HTML Table - Fixed Width Columns and Horizontal Scrolling

Question

I need to create an HTML table with a fixed column width, e.g. 200 pixels for each column. If the table exceeds the horizontal width of the browser window, then to view columns outside the screen, there must be a horizontal scroll. Since the table is dynamically generated from the database, an indefinite number of columns will be displayed each time, so the total width of the table cannot be determined in advance.

In general, I'm looking for a way to just set a fixed column width, and then say that the table scrolls horizontally if it ends out of horizontal space. We appreciate any suggestions!

Answer 1

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

Tables cannot scroll (because they never overflow), but if you place a wrapper around it, users can scroll horizontally (or vertically). However: If you cannot assign a fixed width to the table, it will simply fill as much space as it can find. But he does not overwhelm him with his parent. Despite the fact that cell tables are set to a fixed width.

But I assume that if you create these cells with this width, you can calculate the total width of the table. Use this value (IE 1000px) to create an overflow on the wrapper.