将表格行换到下一行

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}

Answer 3

Improved upon Jukka's answer .

HTML:

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

CSS:

#table_id  {display: block; }
#table_id  td {display: inline-block; border: 3px solid #FFFFFF;}
td { background: green;
     border: 3px solid #FFFFFF;} /* to show cell sizes */

Visit http://jsfiddle.net/zjbyE/391