Html tbody 的边框顶部和 thead 的边框底部不能同时工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6265123/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Border-top from tbody and border-bottom from thead don't work at the same time?
提问by Elaine Marley
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:
我的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:
由于似乎边界折叠可能是问题，但我无法使其正常工作，因此我设置了此沙箱：
There you can see there's only a grey border, there should be a 1px white border right on top of it
在那里你可以看到只有一个灰色边框，它上面应该有一个 1px 的白色边框
回答by Jason Gennaro
In order for this to work, you need to
为了使其工作，您需要
a) use both border-collapseand border-spacing
a) 同时使用border-collapse和border-spacing
b) set the borders on the most interiorelements of the table
b) 在最内部的元素上设置边界table
c) you must set border-collapseand border-spacingon the tableso it inherits
c) 你必须设置border-collapseand border-spacingontable以便它继承
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.
我更改了一些颜色以使其更易于查看。
回答by Aaron Digulla
Check the value of border-collapse. If it's collapse, then the browser will merge adjacent borders.
检查 的值border-collapse。如果是collapse，则浏览器将合并相邻的边框。
回答by Chris Laarman
The borders are probable 'merged' by border-collapse. Try setting border-collapse: seperate;on both the tbody and thead
边界很可能因边界折叠而“合并”。尝试border-collapse: seperate;在 tbody 和 thead 上设置
回答by Matop79
Try setting border-collapse: separate;on both the tbodyand thead. Not "seperate"
尝试border-collapse: separate;在tbody和上进行设置thead。不是“分开”
回答by why.you.and.i
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;
}
