CODEWITHSUNDEEP
htmlcss
Shaul Behr
Shaul Behr

Reputation: 38003

Style sheet preventing table cellpadding from working

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)?

Upvotes: 2

Views: 21769

Answers (5)

Zoltan Toth
Zoltan Toth

Reputation: 47667

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;
}

Upvotes: 14

Robert
Robert

Reputation: 3074

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>

Upvotes: 1

Ben Lee
Ben Lee

Reputation: 53319

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]

Upvotes: 3

Sotiris
Sotiris

Reputation: 40066

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.

Upvotes: 4

Chris
Chris

Reputation: 27609

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).

Upvotes: 1

Related Questions