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

Answer 2

为了这个工作，据我所知，在试图模拟一个固定的单元宽度是将table-layout从fixed到auto改变以及设置一个默认的宽度全部为td。

要动态地做到这一点，我们将表格宽度除以列数（在这种情况下，以百分比表示） - 100/6 = 16.66666...。

然后我们使用calc()内的值:first-child和:last-child，通过用16.6666%替换100%同时也保持现有的改性剂（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