tbody 的border-top 和thead 的border-bottom 不能同时工作？答案

【问题标题】：Border-top from tbody and border-bottom from thead don't work at the same time?tbody 的border-top 和thead 的border-bottom 不能同时工作？
【发布时间】：2011-09-10 01:02:15
【问题描述】：

我有一个非常基本的表格：

<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的白色边框

【问题讨论】：

你的背景不是白色的吧？ :)
不，我的背景是头上的绿色和身体上的浅灰色：D

标签： html css html-table

【解决方案1】：

为了让这个工作，你需要

a) 同时使用border-collapse 和border-spacing

b) 在table

的最interior 元素上设置边框

c) 你必须在 table 上设置 border-collapse 和 border-spacing 以便它继承

所以

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/

【讨论】：

border-spacing 只能应用于整个表格，不能应用于元素。
补充：在小提琴上，您还必须在 th 和 td 元素上设置边框，而不是 thead 和 tbody。

【解决方案2】：

我认为如果我们把它放在单元格元素中会更好:)

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

【讨论】：

【解决方案3】：

尝试在tbody 和thead 上设置border-collapse: separate;。不是“分开”

【讨论】：

【解决方案4】：

边框很可能被边框折叠“合并”。尝试在 tbody 和 thead 上设置border-collapse: seperate;

【讨论】：

我试过了，但仍然只有一个边框会占上风（更大的那个）

【解决方案5】：

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

【讨论】：

实际上，但删除它并没有改变我的 thead 和 tbody 的行为方式：S 事实上，如果没有它，我在问题中提到的边界不会显示（它们都没有）
尝试在其中一个上使用填充或边距来模拟边框。
我已经尝试过了，但它不起作用（没有应用填充或边距）。我用沙盒链接编辑了我的帖子，也许你可以在那里看到它。