Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this:

<table cellspacing="1" cellpadding="1">

How can the same be accomplished using CSS?


Basics

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

td { 
    padding: 10px;
}

For "cellspacing", you can apply the border-spacing CSS property to your table. Eg 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.


Default

The default behavior of the browser is equivalent to:

table {border-collapse: collapse;}
td    {padding: 0px;}

Cellpadding

Sets the amount of space between the contents of the cell and the cell wall

table {border-collapse: collapse;}
td    {padding: 6px;}

Cellspacing

Controls the space between table cells

table {border-spacing: 2px;}
td    {padding: 0px;}

Both

table {border-spacing: 2px;}
td    {padding: 6px;}

Both (special)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

Note: If there is border-spacing set, it indicates border-collapse property of the table is separate .

Try it yourself!

Here you can find the old html way of achieving this.


table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}
链接地址: http://www.djcxy.com/p/338.html

上一篇: 撤消尚未推送的Git合并

下一篇: 在CSS中设置cellpadding和cellspacing?