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