Can I shorten the length of a table border?

border, css, css-tables, html

Solution

This isn't possible, as you describe it, as the `border` of an element extends (by definition) around the full border. You can, however, fake it to some extent using nested elements or with CSS-generated content.

For example, with the following HTML:

<table>
    <tbody>
        <tr>
            <td>text in cell</td>
        </tr>
    </tbody>
</table>

And the following CSS:

td {
    border: 2px solid #000;
    /* change the border-color to disguise the presence of the actual border
       left as #000 here, to show where the fake 'border' sits in relation to
       the actual border-right */
    padding: 0.5em;
    position: relative;
}

td::after {
    content: '';
    background-color: #f00;
    position: absolute;
    left: 100%;
    top: 3px;
    bottom: 3px;
    width: 2px;
}

JS Fiddle demo.

For this to be used in an email client, unfortunately a nested element is required (given the hideously primitive capacities of email clients, even now). So, the following HTML:

<table>
    <tbody>
        <tr>
            <td>text in cell<div></div></td>
        </tr>
    </tbody>
</table>

And CSS should work:

td {
    border: 2px solid #000;
    padding: 0.5em;
    position: relative;
}

td div {
    background-color: #f00;
    position: absolute;
    left: 100%;
    top: 3px;
    bottom: 3px;
    width: 2px;
}

JS Fiddle demo.

Problem

Original source

Related problems

• Border Height on CSS