In a recent project, the design called for 0.5px borders on table rows, but not in the header.

The general idea is, so add a pseudo element as our border (adjust your padding accordingly), and on HiDPI screens, scale it down to half its size, and make twice the width to fill the space.

Take this markup:


The CSS would be:

td {
    position: relative;

td:after {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    background: black;
    transform-origin: bottom left;

@media (-webkit-min-device-pixel-ratio: 2) {
    td:after {
        transform: scale(0.5);
        width: 200%;
        background: red; // To show this is working...

You'll want to tailor the media query to suit your needs. I've kept it short here to make the point.

See the Pen Half Height Pixel Borders by Paul Adam Davis (@PaulAdamDavis) on CodePen.