Table row borders in HTML5 without gaps

Question

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>

score 32 · Accepted Answer · edited Jun 23 '13 at 06:42

32

    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.

edited Jun 23 '13 at 06:42

Peter O.

32,158
14
82
96

answered Jul 03 '12 at 16:20

jackwanders

15,612
3
40
40

1

`border-spacing` did it. Oh CSS... Thank you! – Nick Jul 03 '12 at 16:24
Just to highlight for posterity as it didn't initially work for me. Notice that these attributes are applied to the `table` element, rather than the `td` element! – ElFik Sep 01 '15 at 00:53

Table row borders in HTML5 without gaps

1 Answers1

Linked

Related