Alternate Table Row Color Using Css

Alternate table row color using CSS?

$(document).ready(function()
{
$("tr:odd").css({
"background-color":"#000",
"color":"#fff"});
});
tbody td{
padding: 30px;
}

tbody tr:nth-child(odd){
background-color: #4C8BF5;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>13</td>
</tr>
</tbody>
</table>

Alternate row colours from 2nd row of the table using CSS

You can used nth-child() css selector to chose odd and even. Then skip 2nd row by nth-child(2) selector.

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: green}
tr:nth-child(1) {
background:none;}
<table>
<tbody>
<tr>
<th>col 1</th>
<th>col 2</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</tbody>
</table>

Alternate row color in HTML table with rowspan

A table can have multiple tbody elements. You can use tbody with nth-child to have different colors for your groups of rows:

table {  width: 100%;  border-collapse: collapse;}
thead { background: #e3e3e3;}
tbody * { font-weight: normal;}
tbody:nth-child(odd) { background: red;}
tbody:nth-child(even) { background: blue;}
tr,th { padding: 10px 0;}
th { width: 33.33333%;}
<table>  <thead>    <tr>      <th>Column 1</th>      <th>Column 2</th>      <th>Column 3</th>    </tr>  </thead>  <tbody>    <tr>      <th rowspan="3" class="add-color">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>  </tbody>  <tbody>    <tr>      <th class="add-color" rowspan="2">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>  </tbody>  <tbody>    <tr>      <th class="add-color">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>  </tbody>  <tbody>    <tr>      <th rowspan="4" class="add-color">Row Title</th>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>      <th>Bla Bla</th>      <th>Bla Bla</th>    </tr>    <tr>  </tbody></table>

CSS table alternate row colors and hover colors

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>

Alternate Table Row Background Color Based on Column Value Changing

I have added some javascript logic to make it work. I have added two scenarios. One if class should be based on the Odd/Even values and another is if class should be based on the value change.

See the Snippet below:

$(document).ready(function(){  $("#banner-message tbody tr").each(function() {    if(parseInt($(this).find("td").first().html()) % 2 == 0){      $(this).addClass("altColor");    }  });      let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());  let currentClass = '';  $("#banner-message2 tbody tr").each(function() {    if(prevValue != parseInt($(this).find("td").first().html())){      (currentClass=='')?currentClass = 'altColor':currentClass='';    }      $(this).addClass(currentClass);    prevValue = parseInt($(this).find("td").first().html());  });});
tbody tr {  background: aliceblue;}
.altColor { background: lightgreen;}
div { display:inline-block; padding:10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="banner-message">  Based on the Even/Odd values    <table>        <thead>            <tr>              <th>Key</th>              <th>val</th>            </tr>        </thead>        <tbody>          <tr>            <td>1</td>            <td>1</td>          </tr>          <tr>            <td>1</td>            <td>1</td>          </tr>          <tr>            <td>2</td>            <td>1</td>          </tr>          <tr>            <td>2</td>            <td>1</td>          </tr>          <tr>            <td>2</td>            <td>1</td>          </tr>          <tr>            <td>3</td>            <td>1</td>          </tr>          <tr>            <td>4</td>            <td>1</td>          </tr>          <tr>            <td>4</td>            <td>1</td>          </tr>          <tr>            <td>5</td>            <td>1</td>          </tr>          <tr>            <td>5</td>            <td>1</td>          </tr>          <tr>            <td>5</td>            <td>1</td>          </tr>        </tbody>    </table></div>


<div id="banner-message2"> Based on the value change <table> <thead> <tr> <th>Key</th> <th>val</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>4</td> <td>1</td> </tr> <tr> <td>4</td> <td>1</td> </tr> <tr> <td>4</td> <td>1</td> </tr> <tr> <td>2</td> <td>1</td> </tr> <tr> <td>3</td> <td>1</td> </tr> <tr> <td>3</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> <tr> <td>5</td> <td>1</td> </tr> </tbody> </table></div>

R Data Table Alternating Row Color with Groupings

It has already the classes odd and even assigned, you just "redo" that with the tr:odd and tr:even over the whole table again which causes the issue.

The fix is very simple, replace tr:odd and tr:even in your JS code to tr.odd and tr.even



Related Topics



Leave a reply



Submit