我如何才能在逐行而不是單元格中進行碰撞？

Question

當我在單元格中寫入長字符串時，我想避免調整<table>的大小。

這是代碼from w3school：

table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
th, td { 
 
    padding: 5px; 
 
}

<table style="width:100%"> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Jill </td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>80</td> 
 
    </tr> 
 
</table> 
 

 
<p>Try to change the padding to 5px.</p>

，但如果我這樣寫：包含 「吉爾jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj」

<tr> 
    <td>Jill jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj</td> 
    <td>Smith</td> 
    <td>50</td> 
</tr> 

那麼細胞擴張和合並下一個單元格。

我想要的是：按行而不是按單元格進行展開和合並（即：當單元格需要展開它時，必須停止在下一個單元格的邊框中，並採取行來完成字符串）。

的預期結果是：

Answer 1

您必須添加table-layout:fixed您<table>並設置word-wrap屬性你的細胞（<td>）。另外爲了確保單元格的內容保持最佳狀態，您還必須將vertical-align:top添加到您的單元格中！

請參閱解決方法：

table { 
 
    table-layout:fixed; 
 
    width:100%; 
 
} 
 
table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
th, td { 
 
    padding: 5px; 
 
} 
 
td { 
 
    vertical-align:top; 
 
    word-wrap:break-word; 
 
}

<table> 
 
    <tr> 
 
    <th>Firstname</th> 
 
    <th>Lastname</th> 
 
    <th>Age</th> 
 
    </tr> 
 
    <tr> 
 
    <td>JillJillJillJillJillJillJillJillJillJillJillJillJillJillJillJillJillJill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>John</td> 
 
    <td>Doe</td> 
 
    <td>80</td> 
 
    </tr> 
 
</table>