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는 테이블에 자신의 폭을 적용 할 수 있습니다. 파이어 폭스가 왜이 규칙에 부합하는지 잘 모르겠다. 참고로

는 : 기본 폭을 설정 한 내가 그것을 이해 고정 셀 너비를 시뮬레이션하는 동안이, 작동하기 위해서는 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