CSS table alternate row colors and hover colors

Question

I have a table with class table. The only styling so far is the table th. I'd like to use a CSS value to alternate between white and silver for the rows, and hover silver for the entire row. Does anyone have the code for that?

<table class='table'>
  <tr>
   <th>heading</th>
   <th>heading 2</th>
   <th>heading 3</th>
  </tr>
  <tr class='table'>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
  </tr>
  <tr class='table'>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
  </tr>
  <tr class='table'>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
  </tr>
</table>

That is the html example (as it's written in php)

CSS

.table {
background-color: #FFFFFF;
color: #000000;
}

.table th {
background-color: #333333;
color: #FFFFFF;
}

That's it so far. Looking for the values to use for I'm guessing the table tr css.

Saying different because even/odd doesn't work & it's dynamic php not strict html.

Please show the code you have so far – Asons Mar 21 '16 at 16:06 — Asons, Mar 21 '16 at 16:06

score 9 · Accepted Answer · answered Mar 21 '16 at 16:21

If you've already set the background color of your table to white, you just need to set the alternate row and hover backgrounds, like so:

.table tr {
    transition: background 0.2s ease-in;
}

.table tr:nth-child(odd) {
    background: silver;
}

.table tr:hover {
    background: silver;
    cursor: pointer;
}

Additionally, you probably don't need to repeat the table class on each row, FWIW. You can just target those rows using .table tr as I have done. If you're trying to make sure the table header and body styles don't interfere with each other, it's more semantic and just cleaner to wrap those elements in a thead and tbody:

<table class='table'>
  <thead>
    <tr>
      <th>heading</th>
      <th>heading 2</th>
      <th>heading 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col 1</td>
      <td>col 2</td>
      <td>col 3</td>
    </tr>
    <tr>
      <td>col 1</td>
      <td>col 2</td>
      <td>col 3</td>
    </tr>
    <tr>
      <td>col 1</td>
      <td>col 2</td>
      <td>col 3</td>
    </tr>
  </tbody>
</table>

score 4 · Answer 2 · answered Mar 21 '16 at 16:14

4

You can achieve this with a little bit css, just use the n-th child selector, like this:

HTML:

<table class="alternate">
<tr>
  <td>Row Col 1 </td>
  <td>Row Col 2 </td>
</tr>
<tr>
  <td>Row Col 1 </td>
  <td>Row Col 2 </td>
</tr>
<tr>
  <td>Row Col 1 </td>
  <td>Row Col 2 </td>
</tr>
<tr>
  <td>Row Col 1 </td>
  <td>Row Col 2 </td>
</tr>
</table>

CSS:

.alternate tr:nth-child(2n) {
  background-color: silver;
}

.alternate tr {
  background-color: white;
}

.alternate tr:nth-child(2n):hover, .alternate tr:hover {
  background-color: grey;
}

And here is a working fiddle, I hope that is what you were looking for.

answered Mar 21 '16 at 16:14

Matthias Seifert

2,033
3
29
41

for some reason that doesn't work I've even tried the even/odd settings. – Chris Cox Mar 21 '16 at 16:18
Edit: After seeing your updated question, try to give the tr tag another class, it may happens, because the tr Tag has the same class as the table tag. I know the table is generated with php, but there may is a option to rename the class of the tr Tags – Matthias Seifert Mar 21 '16 at 16:20

CSS table alternate row colors and hover colors

2 Answers2