使用 Css 使 Tr 边框底部位于 TABLE 中左侧的 Td 边框之上

Question

我有一个 table 的问题：http://jsfiddle.net/ex6ZR/252/

    .tr td{
       border-bottom: 2px solid black;
    }

    .td1{
       border-right: 3px solid blue;
    }

我的目标是让底部边框（沿着所有 TR）覆盖 Td 左边框。

当 td.bottom-border-width > td.left-border-width 时有效，但当底部边框更细时（这正是我正在搜索的）

我找到了许多使用 :before & 块的解决方案，但它仅适用于绝对位置（我无法设置它，因为我在 table 中）。

我的结果：

预期结果：

编辑：Jsfiddle 失败了 :x 好的现在就在这里

编辑 2：

问题已解决，感谢 Jess Bart。我已经更新了 jsfiddle，结果很好：

table{
            border-collapse: collapse;
        }
        td{
            position: relative;
            border:1px solid black;
        }
        td::after {
            border-right:1px solid orange;
            content:'';
            height: 100%;
            top: 0;
            right: -1;
            position: absolute;
        }

Answer 1

你可以试试这个代码：

<html>
<head>
    <style>
        table{
            border-collapse: collapse;
        }
        td{
            position: relative;
            border:1px solid black;
        }
        td::after {
            border-right:1px solid orange;
            content:'';
            height: 100%;
            top: 0;
            right: -1;
            position: absolute;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </table>
</body>
</html>

使用 Css 使 Tr 边框底部位于 TABLE 中左侧的 Td 边框之上

Use Css to get Tr border bottom over Td border left in a TABLE

css

border

css-tables