html - CSS - calc 不工作 Firefox

Question

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

Fiddle

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