当使用display:table
和display:table-cell
时,table-cell
的border
元素出现在 table
的顶部。如何确保父 table
的边框在顶部?
我有一个简单的 HTML 布局:
<div class="section-header">General Properties</div>
<div id="policy-parameters">
<div class="parameter-row">
<label for="inputPolicyName" class="">Name</label>
<div class="parameter-entry">
<input type="text" class="" id="inputPolicyName">
</div>
</div>
<div class="parameter-row">
<label for="inputPolicyDescription" class="">Description</label>
<div class="parameter-entry">
<input type="text" class="" id="inputPolicyDescription">
</div>
</div>
</div>
结合直接的 CSS:
#policy-parameters {
border: 1px solid #6c6c6c;
border-collapse: collapse;
display: table;
width: 100%; }
#policy-parameters .parameter-row {
display: table-row; }
#policy-parameters .parameter-row:not(:last-child) {
border-bottom: 1px solid #c4c2be; }
#policy-parameters .parameter-row label {
background-color: #deddd9;
border-right: 1px solid #c4c2be;
display: table-cell;
padding: 5px 3px 5px 7px;
width: 175px; }
#policy-parameters .parameter-row .parameter-entry {
background-color: #f7f6f5;
display: table-cell;
padding: 5px; }
#policy-parameters .parameter-row .parameter-entry input[type="text"] {
width: 400px; }
但是当表格显示时,我得到以下结果:
如何确保 table
的 border
出现在 table-cell
的 border 之上
?
更新:
JSFiddle 的效果:http://jsfiddle.net/EvilClosetMonkey/8N7w2/
请注意,同样的效果也发生在垂直 label
的 border-right
上。
最佳答案
解决方案是删除 border: collapse
并将边框仅应用于表格单元格元素而不是表格行。这是 fiddle :http://jsfiddle.net/8N7w2/4/
#policy-parameters {
border: 1px solid #6c6c6c;
/* removed border-collapse: collapse; */
display: table;
width: 100%;
}
#policy-parameters .parameter-row {
display: table-row;
}
#policy-parameters .parameter-row label {
background-color: #deddd9;
border-right: 1px solid #c4c2be;
display: table-cell;
padding: 5px 3px 5px 7px;
width: 175px; }
#policy-parameters .parameter-row .parameter-entry {
background-color: #f7f6f5;
display: table-cell;
padding: 5px;
}
#policy-parameters .parameter-row .parameter-entry input[type="text"] {
width: 400px;
}
/* added `> *` to apply border to elements within row, not row itself */
#policy-parameters .parameter-row:not(:last-child) > * {
border-bottom: 1px solid #c4c2be;
}
关于html - 获取显示 :table's border on top of display:table-cell's border?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24436885/