Wrap table row to the next line

Question

<table id="table_id">   <tr>     <td>testtesttesttest</td>     <td>testtesttesttest</td>   </tr> </table> 

I would like that if the table does not fit on the screen, then to the second cell of the table will be transferred to another row down? Not the text in the cell, but the whole cell.

Answer 1

Change the cells to inline blocks:

#table_id {   display: block; }  #table_id td {   display: inline-block; }  td {   background: green }

<table id="table_id">   <tr>     <td>testtesttesttest</td>     <td>testtesttesttest</td>   </tr> </table>

jsfiddle

Answer 2

This can't be done with a table, the "row and column" grid is fixed.

However you could use inline-block elements:

<div id="container">     <div>testtesttesttest</div>     <div>testtesttesttest</div> </div> 

CSS:

#container>div {display:inline-block;vertical-align:top}