CSS - 计算无法正常工作 Firefox答案

【问题标题】：CSS - calc not working FirefoxCSS - 计算无法正常工作 Firefox
【发布时间】：2023-03-31 11:21:01
【问题描述】：

我正在尝试将宽度动态添加到 td，这在 Chrome 和 Safari 中可以正常工作，但在 FF 中却不行。

HTML

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>1</td>
        <td>Title</td>
        <td>Interpret</td>
        <td>Album</td>
        <td>Year</td>
        <td>YouTube</td>
    </tr>
</table>

CSS

table{
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
}
td{
    border:1px solid red;
}
td:first-child{
  width: calc(100% / 6 * 0.5);
}
td:last-child{
  width: calc(100% / 6 * 2);
}

如果我硬编码像素值而不是100%，例如calc(690px / 6 * 2)，它可以工作。

【问题讨论】：

使用 flexbox 会有更好的运气。

标签： html css calculated-columns calc

【解决方案1】：

据我了解，为了使其正常工作，在尝试模拟固定单元格宽度时，将 table-layout 从 fixed 更改为 auto 并为所有 td 设置默认宽度的。

要动态执行此操作，我们将表格宽度除以列数（在本例中为百分比） -- 100 / 6 = 16.66666...。

然后我们在calc() 中使用该值来表示:first-child 和:last-child，将100% 替换为16.6666%，同时保留现有的修饰符（分别为0.5 和2）。

CSS

table{
    table-layout:auto;
    width: 100%;
    border-collapse: collapse;
}
td{

    border:1px solid red;
    width: 16.6666%;
}
td:first-child{
  width: calc(16.6666% * 0.5);
}
td:last-child{
  width: calc(16.6666% * 2);
}

Example Fiddle

【讨论】：

不需要手动分割，将table-layout改为auto即可。
@aravindtrue 为了让它在 Firefox 中工作，根据 OP 的要求，必须手动完成，否则 first 和 last 之间的所有列的宽度都会不同。设置它通过使这些列是流动的、统一的，同时仍然允许第一个和最后一个是明确的（按百分比 * 修饰符）来明确解决这个问题。

【解决方案2】：

去掉这行CSS：

table {
    // table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

table-layout: fixed 使您可以将自己的宽度应用于表格。我不知道为什么 Firefox 不配合这个给定的规则。

供参考： using calc() with tables

【讨论】：

@Turnip 哦？我从参考线程中投票最多的答案中阅读了它。我会调整的。谢谢！
同意！但是固定布局为所有td提供相等的宽度，并且不会随着内容大小的变化而改变。