Eureka Moment Wiki

One eureka moment at the time

User Tools

Site Tools


development:css:highlight_table_row

Highlight table rows using CSS

In order to highlight a table row without using javascript, use the following CSS code:

tr {background-color: #000000}
tr:hover {background-color: #333333}

Or if you only want to highlight certain rows, use this CSS code:

tr.hl {background-color: #000000}
tr.hl:hover {background-color: #333333}

And don't forget to add the 'hl' class to those rows.

Table:

<table>
<tr>
<td>C11</td>
<td>C12</td>
<td>C13</td>
</tr>
<tr class="hl">
<td>C21</td>
<td>C22</td>
<td>C23</td>
</tr>
<tr class="hl">
<td>C31</td>
<td>C32</td>
<td>C33</td>
</tr>
</table>
development/css/highlight_table_row.txt · Last modified: 2017/12/12 09:09 by tplecko