html - 获取显示 :table's border on top of display:table-cell's border?

Question

当使用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 上。

Answer 1

解决方案是删除 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; 
}