Question

＆＃13;

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

＆＃13;

<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>

＆＃13;

我有固定宽度的简单表格。我也有固定宽度的列，以便我使用CSS colgroup。

问题1：

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

我尝试了什么

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

问题2：

当我在td中输入文字时，除非我通过点击输入在新行上打破它，否则td的宽度随着文字的增加而增加。

我尝试了什么

要解决这个问题，我已将文本包装在带有固定宽度的p标签中，然后将其放入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;       
}

无法使用CSS colgroup

2 个答案: