development:css:highlight_table_row

Differences

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


development:css:highlight_table_row [2019/10/31 09:04] (current) – created - external edit 127.0.0.1
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>