Why is this table 2px too large?

Question

I can't figure it out, why is this table 102px and not 100px in height? Is there another css attribute I need to set otherthan:

table {
    border-spacing:0;
    border-collapse:collapse;
}

Can you post the rest of your code (HTML, CSS, JS) here so that we don't have to go to an external site? You can even put it in a snippet to demonstrate exactly what you're asking about. — Reinstate Monica -- notmaynard, Sep 16 '15 at 21:25

score 1 · Accepted Answer · answered Sep 16 '15 at 21:26

1

There appears to be padding on the <td> tag assigned by default. This should fix it:

td {
    padding: 0;
}

answered Sep 16 '15 at 21:26

Matt Dalzell

Upvote for being first off the blocks with the right answer. You beat me by a few seconds. – Spudley Sep 16 '15 at 21:53

score 0 · Answer 2 · answered Sep 16 '15 at 21:26

0

The <td> element defaults to having 1px padding, which adds a pixel on each side to make 102px total.

Remove it with td{padding:0;}

answered Sep 16 '15 at 21:26

Spudley

score 0 · Answer 3 · answered Sep 16 '15 at 21:28

0

It's the padding of the td that adds another 2px;

You have set the up div to be 100px but you are measuring the table.

You can set the padding of the td to 0;

td  {
padding: 0px;
}

answered Sep 16 '15 at 21:28

xuma202

score 0 · Answer 4 · answered Sep 16 '15 at 21:29

0

Try removing implicit td padding which is included into overall size of the table. Sufficed to add some directive like this:

td {
    padding: 0;
}

answered Sep 16 '15 at 21:29

helvete

score 0 · Answer 5 · edited May 23 '17 at 12:22

Take a look at this.

Your browser (e.g. Chrome) has its own stylesheet and that's why it adds that border-spacing: 2px; to the table.

If you want more information about browser specific stylesheet, take a look at here.

And Yes. Like lots of people here already mentioned it, you can override the setting by adding

td {
  padding: 0px;
}

BUT I still think it's important to know WHY this happened.

Hope this helps.

5 Answers5