Question

我有一个表，根据收到的数据集动态填充列。每列的宽度为15％。有时有10列，技术上超过100％。预期结果是什么？

背景：我正在尝试添加像列调整大小的excel，当我调整一列的大小时，其他列会缩小，看起来他们正在尝试补偿。我不想要它们，我也不想让它们静止。所以，我只是好奇，如果％宽度导致错误。

注意：请不要推荐任何插件。只是好奇CSS。

Answer 1

取决于用户代理。规范声明用户代理可以选择重排布局，但没有确切地定义它必须如何完成。其中一些只会自动将cols数量除以100％并进行回流。有些浏览器会随意缩小一个或多个列以适应。有些人会将它们保持在定义的宽度，并将多余部分推到下一行。基本上，不保证行为，所以如果你事先不知道列/项的数量，我甚至不会隐式设置宽度。

您可以将它们全部填充，然后使用一些JS将cols除以100％并使用该值来动态更新CSS以进行重排。

Answer 2

如果列显示为块元素，则它们将换行到新行（在firefox中）：

.container {
  width: 100%;
}
.item {
  background: red;
  width: 75%;
}

<div class="container">
  <div class="item">abc</div>
  <div class="item">abc</div>
</div>

但是，如果您使用的是实际表（或display: table），它们的行为会有所不同：

.container {
  width: 100%;
}
.item {
  background: red;
  width: 75%;
}

<table class="container">
  <tr>
    <td class="item">abc</td>
    <td class="item">abc</td>
  </tr>
</table>

我不是table行为方面的专家，可以根据此答案编辑此答案或创建新答案。

当CSS儿童宽度百分比超过100％时会发生什么

2 个答案: