td within a tr in Chrome is off by 4 pixels in width

Question

If you use this code in Chrome, you get a td with the number 4 in it, indicating the width of the td is 4 pixels smaller than the tr. If you do it in Firefox, you get 0. If you add "display:block" to both of the css definition, it changes to 0. My question is, where in the world is Chrome getting the 4 extra pixels from? Demo here. HTML: ```

Hey

``` JS (with jQuery): ``` jQuery(document).ready( function () { var td = $("td"); var tr = $("tr"); td.text(tr.width() - td.width()); }); ``` CSS: ``` tr{ background-color:red; } td { padding:0px; } ```

Accepted Answer

Using Chrome's inspector, you will find this style being applied:

```
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
}
```

Border-spacing of 2 (times 2 sides) = the mysterious 4 pixels.

Fiddle

So, to overcome this, add this to your stylesheet:

```
table {border-collapse: collapse;}
```

And now Firefox and Chrome both provide the same response to the `tr.width()`.

td within a tr in Chrome is off by 4 pixels in width

Solution

Problem