CSS table alternate row colors and hover colors [duplicate]

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
– Asons

2016-03-21 16:06:15 +00:00
Commented Mar 21, 2016 at 16:06 — Asons
– Asons, Commented Mar 21, 2016 at 16:06

Angelique · Accepted Answer · 2016-03-21 16:21:10Z

9

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>

answered Mar 21, 2016 at 16:21

Angelique

9468 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Cox Over a year ago

forgot that part lol

Matthias Wünsch · Accepted Answer · 2016-03-21 16:14:36Z

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, 2016 at 16:14

Matthias Wünsch

2,0923 gold badges32 silver badges43 bronze badges

2 Comments

Chris Cox Over a year ago

for some reason that doesn't work I've even tried the even/odd settings.

Matthias Wünsch Over a year ago

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

Collectives™ on Stack Overflow

CSS table alternate row colors and hover colors [duplicate]

2 Answers 2

1 Comment

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Linked

Related