Geek Answers Handbook

Calc () does not calculate in CSS, differences in browsers

I have created two tables, and I want to set the width of 3 columns depending on the size of the first. I tried calc((100% - 200px)/3) , but it doesn’t work in all browsers: Firefox 40 fails, IE11 fails, and Chrome 44 seems to be doing it right. How can I do this so calc() understood in all browsers? Or should I just forget about it?

I created a much simpler version that also does not work.

 <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>

Same thing with 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>

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

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

+6
source share
2 answers

I solved my problem using table-layout: fixed and, to fix the sizes of the columns, I used the colgroup and col tags. Now calc () seems to be behaving, that is: the leftmost column has a fixed width, and all other columns are the same size.

Thanks to everyone for thinking with me!

+1
source

Why are you trying to count a single value? calc(30%);

calc is very picky about syntax, especially spaces between resource values. You need to add spaces :

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

Edit: this doesn't seem to be a problem, instead approach the width value being applied to the cell (since Firebug shows this), but it differs depending on the contents of the cell, so it shows that the width value is overloaded, so try setting some other values:

in table and CSS cell definitions:

 box-sizing: border-box; margin:0;
+4
source

More articles:


All Articles