边框顶部从tbody和边界底部从thead不工作在同一时间？ [英] Border-top from tbody and border-bottom from thead don't work at the same time?

问题描述

我有一个非常基本的表：

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>

我需要这样：

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

我的css：

thead{border-bottom: 1px solid #fff;}
tbody{border-top: 3px solid #4d4d4d;}

编辑：

由于似乎边框崩溃可能是问题，它的工作我设置了这个沙盒：

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/

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

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

使用 border-collapse 和 border-spacing

b）设置表中最内部元素的边框

b) set the borders on the most interior elements of the table

c）您必须在表上设置 border-collapse 和 border-spacing c>因此它继承

c) you must set border-collapse and border-spacing on the table so it inherits

所以

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屋！