無法使用CSS colgroup保持表格列寬固定

Question

 p { width: 40px; margin: 0; padding: 0; } td { padding: 0; margin: 0; } 

 <table style="width:100px;"> <colgroup> <col style="width:20px;"> <col style="width:40px;"> <col style="width:40px;"> </colgroup> <tr> <th>ID</th> <th>NAME</th> <th>Email</th> </tr> <tbody> <tr> <td>1</td> <td>john</td> <td> <p>johntheman@example.com dsdsdsdsdsd dsdsdsdddddddddddddddddddddddsd dsdsssssssssssssdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds sadddddddddddddddddddddddddd </p> </td> </tr> </tbody> </table> 

我有固定寬度的簡單桌子。 我還為其中的列設置了固定寬度，以達到使用CSS colgroup的目的。

問題一：

如果我簽入開發人員工具，則列寬與colgroup中給出的列寬不同。

我嘗試過的

修復它時，我發現如果我增加文本td增加，寬度會隨着其中的文本而變化，反之亦然。

問題2：

當我在td中輸入文本時，除非不按回車鍵將其換行，否則td的寬度會隨着文本的增加而增加。

我嘗試過的

為了解決這個問題，我將文本用固定寬度的ap標簽包裹起來，然后放入td中，但還是沒有運氣。 我看到的是寬度正在應用於P標簽，但文本溢出。

我期望的是：

我想知道為什么在固定寬度的td之后文本不會在新行上中斷。 為什么即使在固定寬度之后，文本也會從P溢出？ 為什么即使固定寬度后td也必須增加？

我不知道要在這里申請什么。

Answer 1

對於表使用css屬性

table-layout: fixed;

然后提供固定到您的td列。

Answer 2

<p>標簽和<td>的寬度是固定的，不會增加。

除非文本內容中沒有空格，否則它將不會換行到下一行。 您必須使用省略號，以將...代替溢出的文本內容。 在CSS下面使用<p>標記。

p {
    width: 40px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    overflow: hidden;       
}