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.
You can check directly at the CSS grammar.
Basically1, a name must begin with an underscore (_
), a hyphen (-
), or a letter(a
–z
), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must2 be a letter or underscore, and the name must be at least 2 characters long.
-?[_a-zA-Z]+[_a-zA-Z0-9-]*
In short, the previous rule translates to the following, extracted from the W3C spec.:
In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, or a hyphen followed by a digit.
Identifiers can also contain escaped characters and any ISO 10646
character as a numeric code (see next item). For instance, the
identifier "B&W?" may be written as "B&W?" or "B\26 W\3F".
Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity
.
1 It's all made a bit more complicated by the inclusion of escaped unicode characters (that no one really uses).
2 Note that, according to the grammar I linked, a rule starting with TWO hyphens, e.g. --indent1
, is invalid. However, I'm pretty sure I've seen this in practice.
Best Solution
There is currently no way to select the parent of an element in CSS.
If there was a way to do it, it would be in either of the current CSS selectors specs:
That said, the Selectors Level 4 Working Draft includes a
:has()
pseudo-class that will provide this capability. It will be similar to the jQuery implementation.However, as of 2021, this is still not supported by any browser.
In the meantime, you'll have to resort to JavaScript if you need to select a parent element.