获取显示：显示屏顶部的表格边框：表格单元格的边框？

Question

使用display:table和display:table-cell时，border元素的table-cell会显示在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上显示label的{​​{1}}？

更新：

JSFiddle的效果：http://jsfiddle.net/EvilClosetMonkey/8N7w2/

请注意，垂直border-right的{​​{1}}也会产生同样的效果。

Answer 1

问题在于

border-collapse: collapse;

崩溃 - 表格单元格之间的空间和边界都崩溃，因此只有一个边框，单元格之间没有空格。

Here is the demo显示我在.parameter-row上完全（而不是底部）应用了边框，并且它覆盖了桌边框，因为只能有一个边框，中间没有空格。

Answer 2

我知道您不希望单元格边框与表格边框重叠，因此我们尝试使用box-shadow模仿表格边框，这样假表格边框不会覆盖单元格边框但是细胞边界也没有覆盖它：

#policy-parameters {  
 border-collapse: collapse;
 display: table;
 width: 100%; 
 /* the fake border */
 box-shadow: 0 0 0 1px #6c6c6c;  
 margin:1px;
}

Updated demo.

Answer 3

解决方案是删除border: collapse并仅将边框应用于table-cell元素而不是表行。这是小提琴：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; 
}