Geek Answers Handbook

The border apex from the body and the border bottom from thead do not work at the same time?

I have a very simple 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 show one of the boundaries, not two at the same time. This is not very important, but I wonder what causes this problem.

My css:

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

EDIT:

Since it seems like the problem could be the collapse of the border, but I can't get it to work, I set up this sandbox:

http://jsfiddle.net/bRVEu/

There you can see only a gray frame, right above it there should be a white frame of 1 pixel size

+6
source share
5 answers

For this to work, you need to

a) use both border-collapse, andborder-spacing

b) table

c) border-collapse border-spacing table,

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

, .

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

+13

border-collapse. collapse, .

+1

"" . border-collapse: seperate; ,

0

border-collapse: separate; tbody, thead. ""

0

, , :)

.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; 
}
0

More articles:


All Articles