Html 将表格行换到下一行

Wrap table row to the next line

提问by Leo Loki

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

我想如果表格在屏幕上放不下，那么表格的第二个单元格会被转移到另一行吗？不是单元格中的文本，而是整个单元格。

回答by Jukka K. Korpela

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

提琴手

回答by Niet the Dark Absol

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

这不能用表格来完成，“行和列”网格是固定的。

However you could use inline-blockelements:

但是你可以使用inline-block元素：

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

CSS:

CSS：

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

回答by Venkateswara Rao

Improved upon Jukka's answer.

改进了Jukka 的回答。

HTML:

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:

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

访问http://jsfiddle.net/zjbyE/391