html - Render a table with the number of columns and rows depending on the container dimensions -

The HTML "table" tag allows us to display data with certain columns and rows. But there are situations where the number of columns and rows should vary according to the browser window. For example, if each cell lives in 200 x 100 pixels, then we have 4 columns when the container width is 900, but with a width of only 450, 2:

"expand" window :

  [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]  

"cellphone":

  [1] [2] [3] [4] [5] [6] [7] [8] [9] [ 10] [11] [12]  

What is the best way to render it?

Is it possible, without javascript, to render using this table tag? Or using divs on css?

Without entering a never-ending argument between the use of tables or CSS, where the columns and rows The number depends on the container, the Javascript-less solution seems to be using DIV. The following approach uses the "float" CSS attribute.

CSS:

  .container {...} .dynamicTable {...} .dynamicTable div {width: 200px; Swim left; ...}  

HTML:

  & lt; Div class = "container" & gt; & Lt; Div class = "dynamicTable" & gt; & Lt; Div & gt; ITEM1 & lt; / Div & gt; & Lt; Div & gt; ITEM2 & lt; / Div & gt; ... & lt; / Div & gt; & Lt; / Div & gt;  

Full example: