来自tbody的边框顶部和来自thead的边框底部不同时工作吗?

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 #graybody------------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:http://jsfiddle.net/bRVEu/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 toa) use both border-collapse and border-spacingb) set the borders on the most interior elements of the tablec) you must set border-collapse and border-spacing on the table so it inheritssotable { 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的边框底部不同时工作吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！