calc函数能与display:table-cell一起使用吗？

Question

我有一个由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;
}

在我显示它的浏览器窗口宽度下，左列宽度为130px，右列宽度为371px，显然不是我想要的近50%的宽度。

http://jsfiddle.net/H28gT/

- Rumi P.

---

calc() 函数可以在任何需要数值的地方使用。但在这种情况下，是表格布局算法造成了干扰。 - BoltClock

@BoltClock 好的，我想知道它是如何干扰的以及如何进行更正。我真的很困惑，不知道如何让我的表格单元格拥有我想要的宽度，如果它们忽略了我为它们设置的宽度。 - Rumi P.

Answer 1

表格在分配列的空间方面有困难规则，因为默认情况下它们根据单元格的内容分配空间。然而，Calc（目前）无法处理这种情况。但你可以通过设置table-layout属性来强制td获取你声明的宽度：

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

请参阅使用calc()和表格

。

- Rotem Lurx Horovitz