tbody 的border-top 和thead 的border-bottom 不能同时工作？

Question

我有一个非常基本的表：

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

编辑：

由于似乎边界折叠可能是问题，但我无法使其工作，所以我设置了这个沙箱：

http://jsfiddle.net/bRVEu/

在那里你可以看到只有一个灰色边框，上面应该有一个1px的白色边框

Answer 1

为了使它工作，你需要

a) 同时使用border-collapse和border-spacing

b) 在table最内部的元素上设置边框

c）您必须在table上设置border-collapse和border-spacing ，以便它继承

所以

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

我更改了一些 colors 以使其更易于查看。

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

Answer 2

检查border-collapse的值。 如果它是collapse ，那么浏览器将合并相邻的边框。

Answer 3

边界很可能通过边界折叠“合并”。 尝试设置border-collapse: seperate; 在身体和头部

Answer 4

尝试设置border-collapse: separate; 在tbody和thead上。 不是“分开”

Answer 5

我认为如果我们把它放在单元格元素中会更好:)

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