Search code examples
cssbordercss-tables

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

I've a problem with a table: http://jsfiddle.net/ex6ZR/252/

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

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

My goal is to get a bottom-border (along all the TR) overriding a Td Left border.

It works when td.bottom-border-width > td.left-border-width but not when a bottom border thiner (and it's what i'm searching)

I found many solutions using :before & a block, but it works only with absolute position (and i can't set it because i'm in a table).

My result:

Current Result

Result expected:

Result expected

EDIT : Jsfiddle was failed :x The good one is here now

EDIT 2 :

The problem has been solved, thanks to Jess Bart. I've updated the jsfiddle, and the result is great : 

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

  • You can try this code :

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