Style sheet preventing table cellpadding from working - html

Question

I'm writing a web page based on someone else's stylesheet. The stylesheet includes the following:
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
Now I want to create a table that has a non-zero cell padding. But I am having trouble overriding this stylesheet:
<table cellpadding="10">
<tr>
<td padding="10">
Foo
</td>
...
...
</tr>
</table>
and none of the above works; the cell padding stays a tight zero.
How do I override the stylesheet (short of using a different stylesheet)?

Answer 1

You can do in-line styling:
<td style="padding: 10px">
or assign a class to your table and create a rule for it:
<table class="table">
<tr>
<td>
Foo
</td>
</tr>
</table>
and the CSS for this:
table td {
padding: 10px;
}

Answer 2

try to be more specific in your selector, for example
table td {
padding:10px;
}
The above will override
th, td {
padding: 0;
}
Learn more for CSS Specificity here.

Answer 3

Just inline the necessary styles:
<table style="border-collapse: separate; border-spacing: 10px;">
...
</table>
If you do this, you don't need the padding="10" on the td either. See http://jsbin.com/exovat/edit#html for a working example.
An alternative to inlining the styles is if you have access to your own custom stylesheet that loads after their stylesheet. Then you can set an id on the table like <table id="foo"> and then just override their styles in your custom stylesheet like this:
table#foo {
border-collapse: separate;
border-spacing: 10px;
}
[Note: The border-spacing css property does not work with IE7 or below; if you need those browsers to be supported, you are better off using some hackier method]

Answer 4

You could use inline styles (ie styles declared on the element), inline stylesheets (ie styles declared in the same page but not directly on elements) or external stylesheets. Unfortunately CSS styles override attributes in most cases (I believe attributes such as you are using here are deprecated, meaning in essence use stylesheets instead).

Answer 5

Create a new class for the table and apply it only to the tables you want to have this style.
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
table.newStyle { padding:10px; }
<table class="newStyle">
<tr>
<td padding="10">
Foo
</td>
...
...
</tr>
</table>