removing (small) whitespace between HTML table cells

Question

How do I remove the (small) whitespace between table cells? I've tried 3 things to no avail

<html>
    <!-- How to remove white space between table cells? -->
    <style>
td { background-color : #888888; border-collapse : collapse; border-width : 0px; padding : 0px; }
    </style>
    <body>
        <table>
            <tr><td>A</td><td>A</td><td>A</td></tr>
        </table>
    </body>
</html>

Thanks in advance for any insight you can provide.

score 1 · Answer 1 · answered Feb 01 '23 at 20:55

1

The border-collapse: collapse; property is for table not td. Check this:

table {border-collapse: collapse;}
td { background-color : #888888; padding : 0px; }

<table>
  <tr><td>A</td><td>A</td><td>A</td></tr>
</table>

MDN

answered Feb 01 '23 at 20:55

A. Meshu

4,053
2
20
34

score 0 · Accepted Answer · answered Feb 01 '23 at 20:51

Try this: <table cellpadding="0" cellspacing="0">. By default table have some paddings, by tags from the example above you can set it to 0.

<html>
    <!-- How to remove white space between table cells? -->
    <style>
td { background-color : #888888; border-collapse : collapse; border-width : 0px; padding : 0px; }
    </style>
    <body>
        <table cellpadding="0" cellspacing="0">
            <tr><td>A</td><td>A</td><td>A</td></tr>
        </table>
    </body>
</html>

removing (small) whitespace between HTML table cells

2 Answers2