来自tbody的边框顶部和来自thead的边框底部不同时工作吗? [英] Border-top from tbody and border-bottom from thead don't work at the same time?
问题描述
我有一个非常基本的表:
< table id ="ttable5" class ="table-default">< thead>< tr>< nombre</th>< th class ="sort-date"> Provincia</th>< th class ="sort-digit">慕尼黑</th></tr></thead>< tbody>< tr>< td class ="tablaprim"> 1VESTIBULUM TORTOR NISL</td>< td>塞维利亚</td>< td>卡斯蒂利亚·德拉库埃斯塔(Castilleja de la Cuesta)//td</tr>< tr>< td class ="tablaprim"> 4VESTIBULUM TORTOR NISL</td>< td>塞维利亚</td>< td>卡斯蒂利亚·德拉库埃斯塔(Castilleja de la Cuesta)//td</tr></tbody></table>
我需要这个:
------------头------------ 1px边框#fff------------ 3px边框#灰色身体------------
我只能显示一个边框,不能同时显示两个边框.这不是很重要,但我对导致此问题的原因感到好奇.
我的CSS:
thead {border-bottom:1px solid #fff;}tbody {border-top:3px solid#4d4d4d;}
由于似乎边界崩溃可能是问题所在,但我无法使其正常工作,所以我设置了此沙箱:
您会看到只有灰色边框,它的顶部应该有一个1px的白色边框
要使其正常运行,您需要
a)同时使用 border-collapse
和 border-spacing
b)在表
c)您必须在 table
上设置 border-collapse
和 border-spacing
,以便其继承
如此
表{背景:粉红色;边界:0;边界崩溃:单独;边框间距:0 5px;}Thead tr th {边框底部:1像素红色常亮;边界崩溃:单独;边框间距:5px 5px;}tbody tr#first td {border-top:3px实心#4d4d4d;边界崩溃:单独;边框间距:5px 5px;}
我更改了一些颜色以使其更易于查看.
http://jsfiddle.net/jasongennaro/Pf7My/1/ >
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:
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
In order for this to work, you need to
a) use both border-collapse
and border-spacing
b) set the borders on the most interior elements of the table
c) you must set border-collapse
and border-spacing
on the table
so it inherits
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.
http://jsfiddle.net/jasongennaro/Pf7My/1/
这篇关于来自tbody的边框顶部和来自thead的边框底部不同时工作吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!