I'm currently looking for a way to design a table structure with HTML and JS which should be
- Horizontally Scrollable (It has to be possible to dynamically add new columns)
- Tolerant to changing sizes (e.g. when adding some text or controls) of cells. E.g. when doubling the size of the second cell in the second row every other cells should stay in the correct columns.
- It should be possible to adjust to rendered columns to the width of the screen.
- It should be possible to use the same layout with swiping on mobile devices.
- >= IE8, FF, Chrome must be supported
Currently I'm thinking about a DIV based solution where the correct table structures of the columns and rows are preserved by resizing column and cell DIVs if needed.
That's how it should look:
Is the DIV based solution apropriate or is there a possibility of using the default HTML table?