テーブルの行を次の行に折り返す

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} 

Answer 3

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