calc() doesn't calc in CSS, differences in browsers [duplicate] - html

Question

This question already has answers here:
Using calc() with tables
(2 answers)
Closed 6 years ago.
I created two tables, and I want to set the width of the right 3 columns depending on the size of the first one. I tried calc((100% - 200px)/3) but it doesn't work in all browsers: Firefox 40 fails, IE11 fails, and Chrome 44 seems to do it right. How can I do it so that calc() is understood in all browsers? Or should I just forget it?
I created a much simpler version that fails just as well.
<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>
The same, 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>
The 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/

Answer 1

why are you trying to calc a single value? calc(30%);
calc is very picky about syntax, particularly the gaps between resource values. You need to add spaces :
width: calc((100% - 200px) / 3);
^^^^ ^^^^^
Edit: This seems not to be the issue, instead approach that the width value is being applied to the cell (because firebug shows it is), but is different depending on cell contents, so this shows that the width value is being over-ridden, so try setting some other values:
in the table and the cell CSS definitions set:
box-sizing: border-box;
margin:0;

Answer 2

I solved my problem, using table-layout: fixed and, in order to fix column sizes, I used colgroup and col tags. Now calc() seems to behave, that is to say: the leftmost column has a fixed width and all other columns are equally sized.
Thanks all, for thinking with me!