Home/ Questions/Q 8193427
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T04:28:38+00:00

This seems trivial enough, but I can’t seem to stumble upon the answer. I

  • 0

This seems trivial enough, but I can’t seem to stumble upon the answer.

I want to have lines separating my rows in an HTML table, and nothing more. Simple enough, right?

Some Googling brought me upon the table attribute rules, but apparently this isn’t supported in HTML5.

So I searched deeper into CSS and realized I could put borders around the tr‘s, right? Well no, not only does that not work but many SO threads | assured me its a bad idea.

Logically I played with their solutions, which involved different combinations of tr { border-bottom ..., but I always end up with this tiny, obnoxious gap. What gap? There’s about a pixel or two gap between the two td‘s (where a line separating columns would be). This may not seem like a big deal, but it seems unnecessary and I can’t stop noticing it. For whatever reason however, it doesn’t appear in jsfiddle, so I suggest trying this in notepad and opening it in the browser.

Am I making a silly mistake? Is it a typo? Just my computer? Any help would be greatly appreciated… I’ve been staring at this for too long.

Here’s my test file that I’ve been mostly testing in Chrome and Android. It really needs to work in both, as this will also run in a Phonegap app that renders HTML5 in the phone browser.

<html>
<head>
    <style>
        td, th {
            border-bottom: 1px solid black !important;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>Item</th>
            <th>Aisle</th>
        </tr>

        <tr>
            <td>Cookies</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Crackers</td>
            <td>6</td>
        </tr>
        <tr>
            <td>Milk</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Cereal</td>
            <td>2</td>
        </tr>
    </table>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
        table {
       border-spacing: 0;
       border-collapse: collapse;
    }

    See if those help you out. Most browsers default to having a bit of padding between cells (remember the ol’ HTML attribute cellspacing?). This will remove that.

    • 0