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/

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