Elaine Marley Elaine Marley - 26 days ago 7
CSS Question

Border-top from tbody and border-bottom from thead don't work at the same time?

I have a very basic table:

<table id="ttable5" class="table-default">
<thead>
<tr>
<th>Nombre</th>
<th class="sort-date">Provincia</th>
<th class="sort-digit">Municipio</th>
</tr>
</thead>
<tbody>
<tr>

<td class="tablaprim">1VESTIBULUM TORTOR NISL </td>
<td>Sevilla</td>
<td>Castilleja de la Cuesta</td>
</tr>
<tr>

<td class="tablaprim">4VESTIBULUM TORTOR NISL </td>
<td>Sevilla</td>
<td>Castilleja de la Cuesta</td>
</tr>
</tbody>
</table>


I need to have this:

------------
head
------------1px border #fff
------------3px border #gray
body
------------


I can only get to show one of the borders, never two at the same time. It's not really important but I'm curious about what is causing this issue.

My css:

thead{border-bottom: 1px solid #fff;}
tbody{border-top: 3px solid #4d4d4d;}


EDIT:

Since it seems like the border-collapse might be the issue but I can't make it work I've set up this sandbox:

http://jsfiddle.net/bRVEu/

There you can see there's only a grey border, there should be a 1px white border right on top of it

Answer Source

In order for this to work, you need to

a) use both border-collapse and border-spacing

b) set the borders on the most interior elements of the table

c) you must set border-collapse and border-spacing on the table so it inherits

so

table {background:pink; 
  border:0; 
  border-collapse:separate; 
  border-spacing:0 5px;}

thead tr th{border-bottom: 1px solid red; 
  border-collapse:separate; 
  border-spacing:5px 5px;} 

tbody tr#first td{border-top: 3px solid #4d4d4d; 
  border-collapse:separate;
  border-spacing:5px 5px;}

I changed some of the colors to make it easier to see.

http://jsfiddle.net/jasongennaro/Pf7My/1/