Eureka Moment Wiki

One eureka moment at the time

User Tools

Site Tools


development:css:highlight_table_row

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

development:css:highlight_table_row [2017/12/12 10:09] (current)
tplecko created
Line 1: Line 1:
 +====== Highlight table rows using CSS ======
 +In order to highlight a table row without using javascript, use the following CSS code:
 +<code css>
 +tr {background-color:​ #000000}
 +tr:hover {background-color:​ #333333}
 +</​code>​
 +Or if you only want to highlight certain rows, use this CSS code:
 +<code css>
 +tr.hl {background-color:​ #000000}
 +tr.hl:hover {background-color:​ #333333}
 +</​code>​
 +And don't forget to add the '​hl'​ class to those rows.
  
 +Table:
 +<code html>
 +<​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>​
 +</​code>​
development/css/highlight_table_row.txt · Last modified: 2017/12/12 10:09 by tplecko