Does calc work with display:table-cell?

Question

I have a structure made with divs set to display like table elements. It is an entry form, and I want the left column (where the field labels are) to be 50% wide, plus 2 em so an asterisk can fit in for a required field, and the right column (where the fields are) to take up the remaining space.

I tried using calc to set the width. But at least in my up-to-date Chrome, the columns get some arbitrary width, even though inspecting the element shows that the rule exists and is active. What could be the problem? Is calc incompatible with display:table-cell? Or did I build a mistake into it somewhere?

This is the HTML

<div class="mock-table">
<div class="entryRow">
    <div class="mock-td nested-label-column">
        <label class="entryFieldLabel" for="Mutations_0__GeneSpecies">Gene donor</label>
    </div>
    <div class="mock-td nested-field-column">
        <select class="SpeciesList SpeciesListGene entryField" data-val="False" data-val-dropdown="False" data-val-number="False" id="SpeciesListGene_8449" name="Mutations[0].GeneSpecies.Value">
            <option value="2">Black rat</option>
            <option value="61">Cat</option>
            <option value="4">Cattle</option>

        </select>
        <button class="addNewSpecies flatButtonSecondary" type="button" value="A_8449" id="GeneSpeciesList_8449">add other species</button>
    </div>
</div>

And the CSS for it

.dialog-label-column, .nested-label-column {
    width: calc(50% + 2em);
}
.dialog-field-column, .nested-field-column {
    width: calc(50% - 2em);
}
.entryRow {
    overflow: hidden;
    display: table-row;
    width: 100%;
}
div.mock-td {
    display: table-cell;
    vertical-align: top;
    padding-bottom: 0.7em;
}
div.mock-table {
    display: table;
}

http://jsfiddle.net/H28gT/

At the browser window width I displayed it, the left column was 130px wide and the right column was 371px, so obviously not the almost 50% width I wanted.

`calc()` works anywhere that a numeric value is accepted. It's the table layout algorithm that's interfering in this case. — BoltClock, Jul 31 '14 at 11:45
@BoltClock OK, so I'd like to know how it's interfering and how to correct it. I am really stumped and don't know how to get my table cells the width I want them to have, if they disregard the one I set for them. — Rumi P., Jul 31 '14 at 11:49

score 4 · Answer 1 · edited May 23 '17 at 12:02

Tables have difficult rules about distributing the space of the columns because they distribute space dependent on the content of the cells by default. Calc (atm) just wont work with that. What you can do however is to set the table-layout attribute on the table to force the tds getting the width you declared:

table{
   /*this keeps your columns with fixed with exactly the right width*/
   table-layout:fixed;
}

see using calc() with tables

Does calc work with display:table-cell?

1 Answers1