Border-top от tbody и border-bottom от thead не работают одновременно?

у меня есть очень простая таблица:

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

мне нужно вот что:

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

Я могу показать только одну из границ, никогда две одновременно. Это не очень важно, но мне интересно, что вызывает эту проблему.

мой css:

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

EDIT:

поскольку кажется, что крах границы может быть проблемой, но я не могу заставить его работать, я настроил это песочница:

http://jsfiddle.net/bRVEu/

там вы можете видеть, что есть только серая граница, там должна быть белая граница 1px прямо поверх нее

6
css html table

5 ответов

для того чтобы это работало, нужно

a) используйте оба border-collapse и border-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/

12

проверяем значение border-collapse. Если это collapse, затем браузер объединит смежные границы.

1

границы, вероятно, "объединены" крахом границы. Попробуйте установить border-collapse: seperate; на обоих tbody и thead

0

попробуйте border-collapse: separate; на tbody и thead. Не "отдельно"!--4-->

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