Question

如何让我的边框底部不会覆盖我的桌边框？我在英格兰的所有方面都是完整的黑色，而不是一点点灰色 - 或“灰色”。 ;）

更新：不关心被覆盖的桌子底部边框 - 我希望在边框灰色的边上消除。

以下是我正在使用的代码和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;
}

Answer 1

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

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

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

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

如何让我的边框底部不会覆盖我的桌子边框？

3 个答案: