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;
}

http://jsfiddle.net/H28gT/

在我显示的浏览器窗口宽度上，左列为130px宽，右列为371px，因此显然不是我想要的几乎50％宽度。

Answer 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

calc是否适用于display：table-cell？

1 个答案: