javascript - 无法使用 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。

问题一:

如果我在开发人员工具中 checkin ，我的列宽与我在 colgroup 中提供的不同。

我尝试过的

在修复它时，我发现如果我增加文本 td 增加，宽度会随着其中的文本而变化，反之亦然。

问题2:

当我在 td 中输入文本时，除非我不通过点击 enter 在新行中将其打断，否则 td 的宽度会随着文本的增加而增加。

我尝试过的

为了解决这个问题，我将文本包装在固定宽度的 p 标签中，然后将其放入 td 中，但仍然没有成功。我看到的是宽度已应用于 P 标签，但文本溢出。

我的期望:

我想知道为什么文本在 td 的固定宽度后没有在新行上自行中断。为什么即使在固定宽度后文本也会溢出 P？为什么 td 必须在固定宽度后增加？

我不知道我缺少什么来申请这里。

Answer 1

表格使用css属性

table-layout: fixed;

然后为您的 td 列提供 fixed with。