html - Override default CSS for table

Question

I am making a table on a webpage inside Zetaboards forum software. When I am trying to create alternating background color for each row, the forum's default CSS intervenes.

My HTML:

<table class="stats">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

My CSS:

table.stats tbody tr:nth-child(even) {
  background-color: #333;
}
table.stats tbody tr {
  background-color: #232;
}

The above works just as I want it to in cssdeck.com. However, when I move it on my forum webpage, the forums "td" css takes over.

Forum CSS:

td {
  background-image: ...;
  background-color: ...; 
  background-position: ...;
  ...
}

How do I override the forum's default CSS? I have tried adding !important, but it didn't work. I also tried to add a class for each "tr" and add tr.class in my css. That also didn't work.

I do have control over my forum's theme CSS. But I can't change it, since that "td" style is widely used across the forum design. I don't want to add a class to each td in my HTML either...

I appreciate any help I can get, thank you for your time!

Answer 1

Table cells are contained within table rows. When you apply background color to both rows and cells (as is the case with the above example) the cell background color will cover the rows' background color.

Workaround: add this rule to undo the forum's styles applied on table cells:

table.stats td {
    background: transparent none;
}

And apply background color on rows (i.e. no change in your original example):

table.stats tbody tr:nth-child(even) {
    background-color: #333;
}
table.stats tbody tr {
    background-color: #232;
}