calc 是否与 display:table-cell 一起使用？答案

【问题标题】：Does calc work with display:table-cell?calc 是否与 display:table-cell 一起使用？
【发布时间】：2014-09-23 08:08:33
【问题描述】：

我有一个用 div 设置的结构，可以像表格元素一样显示。这是一个输入表单，我希望左列（字段标签所在的位置）为 50% 宽，加上 2 个 em，以便星号可以适合必填字段，右列（字段所在的位置）占用剩余空间。

我尝试使用calc 设置宽度。但至少在我最新的 Chrome 中，列的宽度是任意的，即使检查元素表明规则存在并且处于活动状态。可能是什么问题呢？ calc 是否与 display:table-cell 不兼容？还是我在某处犯了错误？

这是 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>

以及它的 CSS

.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/

在我显示的浏览器窗口宽度上，左栏是 130 像素宽，右栏是 371 像素，所以显然不是我想要的将近 50% 的宽度。

【问题讨论】：

calc() 适用于接受数值的任何地方。在这种情况下，干扰的是表格布局算法。
@BoltClock 好的，所以我想知道它是如何干扰的以及如何纠正它。如果他们无视我为他们设置的宽度，我真的很难过，不知道如何让我的表格单元格达到我想要的宽度。

标签： html css width

【解决方案1】：

表格在分配列的空间方面有困难的规则，因为它们在默认情况下根据单元格的内容分配空间。 Calc (atm) 无法使用。但是，您可以做的是在表格上设置 table-layout 属性以强制 tds 获得您声明的宽度：

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

见using calc() with tables

【讨论】：