Question

我在HTML / CSS中遇到了一些奇怪的行为，其中表行中的输入元素似乎驱动了另一个表行中其他表格单元格的宽度，我认为它不会产生任何影响。

table,
td {
  border: 1px solid black;
}

<table style="width: 700px;">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td style="width: 7%;">Col 3</td>
    <td style="width: 7%;">Col 4</td>
  </tr>
  <tr>
    <td colspan="4">
      <input type="text" style="width: 150px" />
    </td>
  </tr>
</table>
<br/>
<table style="width: 700px;">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td style="width: 7%;">Col 3</td>
    <td style="width: 7%;">Col 4</td>
  </tr>
  <tr>
    <td colspan="4">
      <input type="text" style="width: 350px" />
    </td>
  </tr>
</table>

在此示例中，有两个大多数相同的固定宽度表。每个表都包含一个包含4个表格单元格的表格单元格（其中两个表格单元格具有基于百分比的宽度设置），另一个表格格式为4，表示它包含表格的宽度。最后一行包含一个普通的输入文本字段。

在第一个示例中，列宽度受到尊重。

然而，在第二天他们被忽略了。

示例之间的唯一区别是在文本字段上设置的宽度。但是，在其行中的文本字段有足够的空间（即使没有，我认为它不会对第一行产生任何影响）。

这些表是否有这样的表现？

Answer 1

默认table-layout auto会根据最宽的牢不可破的内容调整单元格大小。无论colspan设置如何，这似乎都是正确的。第一个单元格的内容仍然足够宽，需要进行布局调整。

将table-layout设置为fixed以解决此问题。对于fixed，布局取决于列的宽度而不是其内容。

请参阅this reference。

以下是两个表格表现相同的代码段。

table,
td {
  border: 1px solid black;
}

<table style="width: 700px;table-layout:fixed;">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td style="width: 7%;">Col 3</td>
    <td style="width: 7%;">Col 4</td>
  </tr>
  <tr>
    <td colspan="4">
      <input type="text" style="width: 150px" />
    </td>
  </tr>
</table>
<br/>
<table style="width: 700px;table-layout:fixed;">
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td style="width: 7%;">Col 3</td>
    <td style="width: 7%;">Col 4</td>
  </tr>
  <tr>
    <td colspan="4">
      <input type="text" style="width: 350px" />
    </td>
  </tr>
</table>

根据在不相关行上设置的输入宽度，将忽略表格单元格宽度

1 个答案: