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>
Enter your comment:
P H G G S
 
  • development/css/highlight_table_row.txt
  • Last modified: 2019-10-31 09:04
  • (external edit)