HTML5 Table cell padding - different in browsers

css html html-table cross-browser padding

23,568

Solution 1

There's apparently a bug in the way Firefox and Chrome handle padding in table cells in HTML5: http://code.google.com/p/chromium/issues/detail?id=50633

When you try your markup and CSS with 0 padding, they're the same. When you switch the DOCTYPE to be not HTML5 they are the same as well.

Solution 2

For HTML5 some browsers add 2px to table cells with images if line-height is default. It's flagged as a bug, don't expect it to always be like this.

table { line-height: 0; }

Solution 3

Actually, this behavior is caused by different defaults of box-sizing values on TD elements. Take a look at the spec: http://www.w3.org/TR/css3-ui/#box-sizing0

Box-sizing is luckily supported on all major browsers, see http://caniuse.com/#search=box-sizing

But there are issues in browsers preventing you from overriding default box-sizing value, especially when you are working with TD, the behavior is almost unpredictable across browsers.

In this JSFiddle example the most stable behavior across browsers is shown by border-box and content-box on a DIV element.

So just avoid using padding when height is fixed, and instead just wrap TD contents with additional padding container as a simple and bulletproof workaround.

Hope this helps!

Solution 4

td { padding: 10px 0 0 0; }

This says: padding-top: 10px;, replace the 10px with 0 and hopefully it'll be the same. This means that Firefox and IE9 are not accounting for padding. (I think)

Solution 5

It should be written like this padding: 0 10px 0 10px; otherwise browsers wont fully support the dimension.

View more solutions

23,568

Author by

kolcun

Updated on July 09, 2022

Comments

kolcun almost 2 years
I've broken this down to a fairly simple example.

For me, it looks different in Chrome 7.0 than it does in Firefox 3.6.12. IE 9 beta looks like Chrome.

I'd like to be able to set padding on the TD, and have it render with the same height in all browsers. Currently, with the 10px top padding, the cells in Chrome look taller than in Firefox.

I've tried using Eric's reset css, it doesn't change the result Any ideas why these are being rendered differently?

An example of how it looks is here - http:// yfrog. com/5zqa7p

And the Code...
```
<!DOCTYPE html>
<head>
<title>padding test</title>
<meta charset=utf-8>
<style>
td { width: 100px; height:100px; background: green; padding: 10px 0 0 0; }
</style>
</head>
<body>
<table>
<tr><td>TEST</td></tr>
<tr><td>TEST</td></tr>
</table>
</body>
```