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）您必须在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/

Answer 2

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

Answer 3

边界很可能通过边界崩溃“合并”。尝试在tbody和thead上设置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; 
}

来自tad的border-top和来自thead的border-bottom不能同时工作？

5 个答案: