Getting display:table's border on top of display:table-cell's border?

Question

When using display:table and display:table-cell, the border of the table-cell elements appear on top of the table. How can I make sure the parent table's border is on top?

I have a simple HTML layout:

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

Combined with a straight forward 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; }

But when the table displays, I get the following result:

enter image description here

How can I make sure make sure the table's border appears on top of the table-cell's border?

UPDATE:

JSFiddle of the effect: http://jsfiddle.net/EvilClosetMonkey/8N7w2/

Note that the same effect is happening on the vertical label's border-right too.

a simple workaround would be to set the table border to 2px instead of 1px, its not much of a difference but it will put the table border over the cell's border — Banana, Jun 26 '14 at 17:51
@Filly, this fixes the `border` issue but it creates a `background-color` (actually a `width`) issue. See what happens after the text fields here: http://jsfiddle.net/EvilClosetMonkey/8N7w2/1/. Also, shouldn't `display:table-row` and `display:table-cell` only appear within a `display:table` for proper CSS? — Nicholas Pappas, Jun 26 '14 at 18:03

score 0 · Answer 1 · answered Jun 26 '14 at 18:08

The issue is because of

border-collapse: collapse;

collapse - in which both the space and the borders between table cells collapse so there is only one border and no space between cells.

Here is the demo to show that in which I applied the border fully (not bottom) on .parameter-row and it overlayed the table border as there can be only one border and no space in between.

score 0 · Answer 2 · answered Jun 26 '14 at 18:19

I understand that you don't want the cell border to overlap the table border, so we try mimicking the table-border using box-shadow, that way the fake table-border does not cover the cell border but the cell border also does not cover it:

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

Updated demo.

score 0 · Accepted Answer · edited Jun 26 '14 at 19:44

The solution is to remove border: collapse and apply the border only to the table-cell elements and not the table row. Here's the 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; 
}

I had read elsewhere `border:collapse` was needed, and saw results that implied I needed it. Adding the `> *` to the row seemed to elevate that need, and keeps things clean! Like it! — Nicholas Pappas, Jun 26 '14 at 19:41
`border-collapse` is useful when border is placed around all table cells. In your case you are applying borders selectively and there is no need to collapse them. — DRD, Jun 26 '14 at 20:17

Getting display:table's border on top of display:table-cell's border?

3 Answers3

Updated demo.