Webmasters Stack Exchange is a question and answer site for pro webmasters. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm currently looking for a way to design a table structure with HTML and JS which should be

  1. Horizontally Scrollable (It has to be possible to dynamically add new columns)
  2. 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.
  3. It should be possible to adjust to rendered columns to the width of the screen.
  4. It should be possible to use the same layout with swiping on mobile devices.
  5. >= 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:

enter image description here

Is the DIV based solution apropriate or is there a possibility of using the default HTML table?

share|improve this question

closed as off topic by Stephen Ostermiller, Hamlet Mar 2 '13 at 22:38

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

Questions involving a programming implementation would be better asked on StackOverflow.com – Stephen Ostermiller Mar 3 '13 at 2:44