无法使用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;       
}