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

Question

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

no, my background is green on the head and a lighter grey on the body :D — Elaine Marley, Jun 07 '11 at 14:01

score 25 · Accepted Answer · edited Dec 29 '20 at 15:43

25

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/

edited Dec 29 '20 at 15:43

Community

1
1

answered Jun 07 '11 at 14:58

Jason Gennaro

34,535
8
65
86

1

`border-spacing` can be applied only to the whole table, not elements. – Sandman4 Oct 31 '12 at 14:20
Complementing: on the fiddle you also had to put the borders on `th` and `td` elements, instead of `thead` and `tbody`. – The Student Sep 24 '19 at 00:13

score 1 · Answer 2 · answered Jun 07 '11 at 12:27

1

Check the value of border-collapse. If it's collapse, then the browser will merge adjacent borders.

answered Jun 07 '11 at 12:27

Aaron Digulla

321,842
108
597
820

It actually was but removing that didn't change the way my thead and tbody behave :S In fact without it the borders I mentioned in my question don't show (neither of them) – Elaine Marley Jun 07 '11 at 14:04
Try to use a padding or margin on one of them to simulate a border. – Aaron Digulla Jun 07 '11 at 14:26
I had already tried that but it doesn't work (no padding or margin are applied). I edited my post with a link to a sandbox, maybe you can see it there. – Elaine Marley Jun 07 '11 at 14:45

score 0 · Answer 3 · answered Jun 07 '11 at 12:31

0

The borders are probable 'merged' by border-collapse. Try setting border-collapse: seperate; on both the tbody and thead

answered Jun 07 '11 at 12:31

Chris Laarman

1,559
12
25

I tried ths but still only one border will prevail (the bigger one) – Elaine Marley Jun 07 '11 at 14:00

score 0 · Answer 4 · edited Jul 01 '16 at 12:52

0

Try setting border-collapse: separate; on both the tbody and thead. Not "seperate"

edited Jul 01 '16 at 12:52

mathielo

6,725
7
50
63

answered Jun 07 '11 at 14:07

Matop79

146
2
10

score 0 · Answer 5 · edited Sep 25 '17 at 19:57

0

I think it's better if we put it in the cell element :)

.table-default {
    border-collapse: separate; //DON'T FORGET TO MAKE IT SEPARATE
    border-spacing: 0;
}    
.table-default th { 
    border-bottom: gray solid 3px; 
}
.table-default td { 
    border-top: white solid 1px; 
}

edited Sep 25 '17 at 19:57

Mahib

3,977
5
53
62

answered Jun 07 '11 at 15:24

why.you.and.i

497
8
20

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

5 Answers5

Linked