Переверните строку таблицы на следующую строку

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

Мне бы хотелось, чтобы таблица не помещалась на экране, а затем во вторую ячейку таблицы будет перенесена на другую строку вниз? Не текст в ячейке, а целая ячейка.

Ответы

Ответ 1

Измените ячейки на встроенные блоки:

#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>

Ответ 2

Это невозможно сделать с таблицей, сетка "строка и столбец" исправлена.

Однако вы можете использовать элементы inline-block:

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

CSS

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

Ответ 3

Улучшено на ответ Юкки.

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 */

Посетите http://jsfiddle.net/zjbyE/391