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); 
} 

Iハードコードピクセル値の代わりに、例えばため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

、私はそれを理解するように、固定されたセル幅をシミュレートしようとすると、autoにfixedからtable-layoutを変更することであるだけでなく、のためのデフォルトの幅を設定しながら：参考

すべてtdさんです。

これを動的に行うには、表の幅を列数（この場合はパーセント値）で割ります。100/6 = 16.66666...。

その後、我々はまた、既存の改質剤（それぞれ0.5と2を）維持しながら16.6666%と100%を置き換えることによって、:first-childと:last-childためcalc()内にその値を使用します。

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