calc() doesn't calc in CSS, differences in browsers

Question

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/

It seams that it's not a browser-compatibility issue [though](http://caniuse.com/#feat=calc) — Jonathan La'Fey, Aug 18 '15 at 10:38
Could you be a bit more specific regarding what "fails" means? It doesn't layout as you expect? The layout gets ignored? It crashed the browser? According to http://caniuse.com/#feat=calc there can be issued caused by how different browsers handle subpixels. — GordonM, Aug 18 '15 at 10:38
Did you open the fiddle? You'll see that when the col3 width is set to 30%, all browsers behave correctly, whereas when the width is set to calc(30%) only Chrome seems to work. — D.Bugger, Aug 18 '15 at 11:31

Martin · Answer 1 · 2015-08-18T12:21:42.440

4

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;

edited Aug 18 '15 at 12:21

answered Aug 18 '15 at 10:39

Martin

22,212
11
70
132

Thanks, but it's not relevant: there are spaces around the minus, and the slash doesn't require them. As I said, I presented a much simpler version, with a trivial calc expression, and even that goes wrong. – D.Bugger Aug 18 '15 at 11:29
@D.Bugger Firebug shows your width value (`30%`) is being applied, but perhaps you should try to set the `min-width` to 30%. Because width value can be over-ruled by other elements in the hiarachy – Martin Aug 18 '15 at 12:15
I'm going to try to use _table-layout: fixed_ – D.Bugger Aug 18 '15 at 12:17
1

Yes. When you use `table-layout:fixed`, *"Table and column widths are set by the widths of table and col elements or by the width of the first row of cells"*. So, in your use-case you have to use a fixed layout (in addition to what Martin says above). You also need to take into account that `2px` border and `1px` border-spacing. It will make a difference of `11px` overall. Then, it works perfectly fine: http://jsfiddle.net/abhitalks/19vrf52o/6/ (check dev tools) – Abhitalks Aug 18 '15 at 12:32

score 1 · Accepted Answer · answered Aug 18 '15 at 13:07

1

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!

answered Aug 18 '15 at 13:07

D.Bugger

2,300
15
19

Pleased you got it sorted. – Martin Aug 18 '15 at 14:04

calc() doesn't calc in CSS, differences in browsers

2 Answers2