html - Set cellpadding and cellspacing in CSS?

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

How can the same be accomplished using CSS?
 
Answer
 

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.
    


Subscribe to:
Post Comments (Atom)



plot explanation - Why did Peaches&#39; mom hang on the tree? - Movies &amp; TV

In the middle of the movie Ice Age: Continental Drift  Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...









c++ faq - The Definitive C++ Book Guide and List
This question attempts to collect the few pearls among the dozens of bad C++ books that are published every year. Unlike many other programm...





apache - How to redirect from www to https www with htacces?
I need to do the following: My current address looks like: https://www.domain.com I want to redirect with htaccess: www.domain.com TO https:...





c++ - Using namespace std vs other alternatives
        using namespace std; So far in my computer science courses, this is all we have been told to do. Not only that, but it's all tha...















Search This Blog