Question

我正在尝试动态地将宽度添加到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)，则可行。

Answer 1

删除这一行CSS：

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

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

供参考： using calc() with tables

Answer 2

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

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

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

<强> CSS

Example Fiddle

CSS - 计算不适用于Firefox

2 个答案: