跨元素的舍入固定表格布局单元格宽度百分比计算

Posted 2023-03-05

【中文标题】跨元素的舍入固定表格布局单元格宽度百分比计算

【英文标题】：Rounded fixed table layout cell width percentage calculation for spanned elements

【发布时间】：2020-02-29 17:20:36

【问题描述】：

注意：这个问题似乎只发生在 Chrome 等 Blink 浏览器中。在撰写本文时它还没有出现在 Firefox 中。

我有一个table-layout: fixed 表，其中包含一些跨越多列的元素。为确保它们填满整个列，它们使用calc() 将它们的宽度确定为 100% 的（colspan）倍数，加上它们的边界占用的空间。

例如，跨越三列的项目将是calc(300% + 2px)，即三个列宽加上它们之间的两个 1px 厚的边框。

在 Chrome 中，此计算会导致项目无法填充特定屏幕宽度的列。当您调整屏幕大小时，四舍五入会导致项目在达到正确值时“跳跃”。

除了四舍五入之外还有其他原因会发生这种情况，我能做些什么来防止它发生吗？大概将整个表格换成相等的 div 单元格会起作用，但我更愿意使用我所拥有的。

table 
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;

td 
  position: relative;
  padding: 0;
  border: 1px solid black;

.spanner 
  width: calc(600% + 5px);
  background-color: rgba(254,0,11, 0.3);

<table>
  <tbody>
    <tr>
      <td>Some</td>
      <td>table</td>
      <td>cells</td>
      <td>are</td>
      <td>up</td>
      <td>here</td>
    </tr>
    <tr>
      <td>
        <div class="spanner">Here's some div that is meant to span the first two table cells, but it doesn't quite do that</div>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

【参考方案1】：

你应该使用“colspan”属性

<table>
  <tbody>
    <tr>
      <td>Some</td>
      <td>table</td>
      <td>cells</td>
      <td>are</td>
      <td>up</td>
      <td>here</td>
    </tr>
    <tr>
      <td colspan="2">
        Here's some div that is meant to span the first two table cells
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

关于宽度，如果你使用 css 属性

box-sizing : border-box

边框应包含在宽度计数中

【讨论】：

我不需要单元格来跨越列，单元格中的一些 div 需要跨越。它们可能是偏移的，并且可能不是全宽的。 box-sizing 在这里似乎没有什么区别，我的已经设置为 border-box。