Template:Row hover highlight
.svg){kind=link}
| CSS | This template uses TemplateStyles: |
This template enables row hover highlighting via wikitable class modifiers mw-datatable and hover-highlight. In addition to adding row highlights, mw-datatable also changes the background of the cells to white. To only add a highlight, use hover-highlight.
Using {{row hover highlight}}
Basic usage:
Wikitext
{{row hover highlight}}
{| class=mw-datatable
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
Rendered result
| 1 | 2 | 3 |
|---|---|---|
| 1-1 | 2-1 | 3-1 |
| 1-2 | 2-2 | 3-2 |
class=mw-datatable can be used in combination with class=wikitable, in which case the non-header cells will have a white background.
Wikitext
{{row hover highlight}}
{| class="wikitable mw-datatable"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
Rendered result
| 1 | 2 | 3 |
|---|---|---|
| 1-1 | 2-1 | 3-1 |
| 1-2 | 2-2 | 3-2 |
To keep the light gray background from class=wikitable, use class=hover-highlight:
Wikitext
{{row hover highlight}}
{| class="wikitable hover-highlight"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
Rendered result
| 1 | 2 | 3 |
|---|---|---|
| 1-1 | 2-1 | 3-1 |
| 1-2 | 2-2 | 3-2 |
Using {{mw-datatable}} for white background
If you want a white background for data cells, then this may be easier to remember since the template and class name are the same.
Wikitext
{{mw-datatable}}
{| class="wikitable mw-datatable"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
Rendered result
| 1 | 2 | 3 |
|---|---|---|
| 1-1 | 2-1 | 3-1 |
| 1-2 | 2-2 | 3-2 |
See also
- Help:Table/Advanced § Highlight rows on hover
- {{shy}} – Can be used to help narrow columns by adding a soft hyphen to a word to allow it to wrap.
More template styles for tables:
- {{sticky header}} - makes column headers stick to the top of the page while scrolling through table data.
- {{sort under}} - moves the sorting arrows under the headers.
- {{static row numbers}} - adds a column of row numbers to a table.
- {{table alignment}} - aligns the cells in a column, or a whole table.