将表格行换行到下一行

时间:2013-06-18 02:31:34

标签: html css

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

我想如果表格不适合屏幕,那么表格的第二个单元格会转移到另一行吗?不是单元格中的文本,而是整个单元格。

3 个答案:

答案 0 :(得分:60)

将单元格更改为内联块:

&#13;
&#13;
#table_id {
  display: block;
}

#table_id td {
  display: inline-block;
}

td {
  background: green
}
&#13;
<table id="table_id">
  <tr>
    <td>testtesttesttest</td>
    <td>testtesttesttest</td>
  </tr>
</table>
&#13;
&#13;
&#13;

jsfiddle

答案 1 :(得分:2)

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

但是您可以使用inline-block元素:

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

CSS:

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

答案 2 :(得分:1)

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

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