html - 表の行を次の行に折り返す

Question

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

テーブルが画面に収まらない場合、テーブルの 2 番目のセルが下の別の行に転送されることを希望しますか? セル内のテキストではなく、セル全体。

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

jsfiddle

Answer 2

これはテーブルでは実行できません。「行と列」グリッドが固定されています。

inline-blockただし、要素を使用できます。

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

CSS:

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