I have a table which requires dashes over cell borders, something like this:

-|-

given that "|" is a vertical border, and a dashed line should be in one piece, going over the cell border. Couldn't find the css property anywhere, sorry if it's too easy :D

CodePudding user response：

Hey you could use the ::after pseudoelement and the not last-child selector, like that:

    <style>
        table {
            border-collapse: collapse;
        }

        td {
            position: relative;
            padding: 0 10px;
        }

        td:not(:last-child)::after {
            position: absolute;
            content: '';
            display: block;
            height: 1px;
            width: 20px;
            background: #000;
            right: -10px;
            top: 50%;
        }
    </style>

    <table border="1" >
        <tr>
            <td>Hallo</td>
            <td>Hallo</td>
            <td>Hallo</td>
        </tr>
    </table>