如何让我的边框底部不会覆盖我的表格边框？答案

【问题标题】：How can I make my border-bottom not overwrite my border for my table?如何让我的边框底部不会覆盖我的表格边框？
【发布时间】：2012-01-30 17:27:19
【问题描述】：

如何让我的边框底部不覆盖我的表格边框？我什么侧面是完全黑色的，而不是一点点灰色——或者在英格兰对你们所有人来说都是“灰色”。 ;)

更新：不关心表格的底部边框被覆盖——我希望消除边框为灰色的两侧。

这是我正在使用的代码和一个jsfiddle.net 页面，供您参考；）

<table>
    <tr>
        <td>row1</td>
    </tr>
    <tr>
        <td>row2</td>
    </tr>
    <tr>
        <td>row3</td>
    </tr>
    <tr>
        <td>row4</td>
    </tr>
</table>

table {
    border: 4px solid #000;
    width: 400px;
}

table tr {
    border-bottom: 4px solid #CCC;
}

【问题讨论】：

标签： html css html-table border

【解决方案1】：

将border-collapse:separate 设置为您的表格，并将边框添加到td 而不是tr 的：

http://jsfiddle.net/ptriek/uJ5zN/2/

【讨论】：

【解决方案2】：

在这一点上，@ptriek 的解决方案似乎可以更好地解决您的问题，但仅供参考，这里有一个解决方法，使用 <div> 来解决问题。此解决方案还可以保持最后一个 <tr> 的边界完好无损，并且在其他情况下可能会派上用场。

小提琴：http://jsfiddle.net/uJ5zN/4/

HTML

<div class="wrapper">
    <table>
        <tr>
            <td>row1</td>
        </tr>
        <tr>
            <td>row2</td>
        </tr>
        <tr>
            <td>row3</td>
        </tr>
        <tr>
            <td>row4</td>
        </tr>
    </table>
</div>

CSS

.wrapper
{
    border: 4px solid #000;
    width: 400px;
}

table {
    width: 400px;
}

table tr{
    border-bottom: 4px solid #CCC;
}

【讨论】：

【解决方案3】：

一种方法是使用 CSS last-child 选择器，如下所示：

table {
    border: 4px solid #000;
    width: 400px;
}

table tr {
    border-bottom: 4px solid #CCC;
}

table tr:last-child {
    border-bottom: 4px solid #000;
}

【讨论】：