calc() не рассчитывается в CSS, различия в браузерах

Question

Я создал две таблицы, и я хочу установить width правых 3 столбцов в зависимости от размера первого. Я старался calc((100% - 200px)/3) но он работает не во всех браузерах: Firefox 40 не работает, IE11 не работает, а Chrome 44, кажется, делает это правильно. Как я могу сделать это так, чтобы 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 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>

То же самое, с 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;
    }

Смотрите http://jsfiddle.net/sjefb/19vrf52o/

Answer 1

Я решил свою проблему, используя table-layout: fixed и, чтобы исправить размеры столбцов, я использовал теги colgroup и col. Теперь, кажется, работает calc(), то есть самый левый столбец имеет фиксированную ширину, а все остальные столбцы имеют одинаковый размер.

Спасибо всем, что подумали со мной!

Answer 2

Почему вы пытаетесь рассчитать одно значение? calc(30%);

calc очень требователен к синтаксису, особенно к разрывам между значениями ресурсов. Вам нужно добавить пробелы:

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

Изменить: это, кажется, не проблема, вместо этого подход, что значение ширины применяется к ячейке (потому что firebug показывает, что это так), но отличается в зависимости от содержимого ячейки, так что это показывает, что значение ширины переопределяется поэтому попробуйте установить другие значения:

В таблице CSS и определениях ячейки установлено:

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