HTML5 Table Cell Padding - Different in Browsers

HTML5 Table cell padding - different in browsers

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.

HTML5 Table cell padding - different in browsers

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.

What replaces cellpadding, cellspacing, valign, and align in HTML5 tables?

/* cellpadding */
th, td { padding: 5px; }

/* cellspacing */
table { border-collapse: separate; border-spacing: 5px; } /* cellspacing="5" */
table { border-collapse: collapse; border-spacing: 0; }   /* cellspacing="0" */

/* valign */
th, td { vertical-align: top; }

/* align (center) */
table { margin: 0 auto; }

Set cellpadding and cellspacing in CSS?

Basics

For controlling "cellpadding" in CSS, you can simply use padding on table cells. E.g. for 10px of "cellpadding":

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. E.g. for 10px of "cellspacing":

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

This property will even allow separate horizontal and vertical spacing, something you couldn't do with old-school "cellspacing".

Issues in IE ≤ 7

This will work in almost all popular browsers except for Internet Explorer up through Internet Explorer 7, where you're almost out of luck. I say "almost" because these browsers still support the border-collapse property, which merges the borders of adjoining table cells. If you're trying to eliminate cellspacing (that is, cellspacing="0") then border-collapse:collapse should have the same effect: no space between table cells. This support is buggy, though, as it does not override an existing cellspacing HTML attribute on the table element.

In short: for non-Internet Explorer 5-7 browsers, border-spacing handles you. For Internet Explorer, if your situation is just right (you want 0 cellspacing and your table doesn't have it defined already), you can use border-collapse:collapse.

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

Note: For a great overview of CSS properties that one can apply to tables and for which browsers, see this fantastic Quirksmode page.

Table cell padding woes with Chrome

Removed table-layout: fixed and it seems to work.

If table-layout: fixed is to be used, then width instead of min-width should be use to define column widths.

Not sure why only Chrome was playing up, but perhaps it has a better standards implementation.

Why are cellspacing and cellpadding not CSS styles

Cellspacing :

table { border-collapse: collapse; }

As for cellpadding, you can do

table tr td, table tr th { padding: 0; }

---

Related Topics