calc() non calcola in CSS, differenze nei browser

Question

Ho creato due tabelle e voglio impostare lo width delle 3 colonne di destra in base alla dimensione del primo. Ho provato calc((100% - 200px)/3) ma non funziona con tutti i browser: Firefox 40 fallisce, IE11 fallisce e Chrome 44 sembra farlo bene. Come posso fare in modo che calc() sia compreso in tutti i browser? O dovrei semplicemente dimenticarlo?

Ho creato una versione molto più semplice che fallisce altrettanto bene.

<table class="tableauTable"> 
<thead> 
    <tr class="tableauRow first"> 
     <th colspan="3" rowspan="2" class="tableauCell first"><span class="xspTextComputedField">Objet - Acteurs</span> 
     </th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Julien GARDIN</span> 
     </th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Justine VINCLAIR</span> 
     </th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Marcel COMMAS</span> 
     </th> 
    </tr> 
</thead> 
<tfoot> 
    <tr class="tableauRow first"> 
     <th colspan="3" header="" class="tableauCell first"></th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Julien GARDIN</span> 
     </th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Justine VINCLAIR</span> 
     </th> 
     <th class="tableauCell header col3"><span class="xspTextComputedField">Marcel COMMAS</span> 
     </th> 
    </tr> 
</tfoot> 
</table> 

Lo stesso, con calc():

<table class="tableauTable"> 
<thead> 
    <tr class="tableauRow first"> 
     <th colspan="3" rowspan="2" class="tableauCell first"><span class="xspTextComputedField">Objet - Acteurs</span> 
     </th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Julien GARDIN</span> 
     </th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Justine VINCLAIR</span> 
     </th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Marcel COMMAS</span> 
     </th> 
    </tr> 
</thead> 
<tfoot> 
    <tr class="tableauRow first"> 
     <th colspan="3" header="" class="tableauCell first"></th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Julien GARDIN</span> 
     </th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Justine VINCLAIR</span> 
     </th> 
     <th class="tableauCell header col3x"><span class="xspTextComputedField">Marcel COMMAS</span> 
     </th> 
    </tr> 
</tfoot> 

Il CSS:

.tableauTable { 
     width:100%; 
     border-spacing: 1px; 
    } 
    .tableauRow.first .tableauCell { 
     background: #d2d2d2 none repeat scroll 0 0 !important; 
     text-align: center; 
    } 
    .tableauCell.first { 
     width: 150px; 
    } 
    .tableauCell.col3 { 
     width: 30%; 
    } 
    .tableauCell.col3x { 
     width: calc(30%); 
    } 
    .tableauCell.first { 
     background: #d2d2d2 none repeat scroll 0 0 !important; 
     text-align: center; 
    } 
    .tableauCell { 
     background: #eee none repeat scroll 0 0; 
     border: 2px solid white; 
     color: black; 
    } 

Vedi http://jsfiddle.net/sjefb/19vrf52o/

Answer 1

Ho risolto il problema utilizzando il layout di tabella : corretto e, per correggere le dimensioni delle colonne, ho utilizzato i tag colgroup e col. Ora calc() sembra comportarsi, vale a dire: la colonna più a sinistra ha una larghezza fissa e tutte le altre colonne hanno uguali dimensioni.

Grazie a tutti, per aver pensato con me!

Answer 2

perché stai cercando di calc un singl valore? calc(30%);

calc è molto schizzinoso sulla sintassi, in particolare gli spazi tra i valori delle risorse. È necessario aggiungere spazi:

width: calc((100% - 200px)/3); 
       ^^^^ ^^^^^ 

Edit: Questo sembra non essere il problema, invece approccio che il valore della larghezza è applicato alla cella (perché Firebug mostra che è), ma è diverso a seconda del contenuto delle celle, quindi questo dimostra che il valore della larghezza viene sovrascritta, quindi provare ad impostare altri valori:

nella tabella e le definizioni CSS cellule fissate:

box-sizing: border-box; 
margin:0;