我有一个结构,div设置为显示像表元素.这是一个输入表单,我希望左列(字段标签所在的位置)为50％宽,加上2 em,因此星号可以适合所需的字段,右列(字段所在的位置)可以占用剩下的空间.
我尝试使用calc来设置宽度.但至少在我最新的Chrome中,列会获得一些任意宽度,即使检查元素显示规则存在且处于活动状态.可能是什么问题呢？ calc与display不兼容：table-cell？或者我在某个地方犯了错误？
这是HTML
和它的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％宽度.
最佳答案
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;
}
