Edge Rewrite
// HTMLRewriter · presentation

This page was redesigned at the edge.

Cloudflare fetched the original article and streamed it through HTMLRewriter to apply an entirely new visual system without rebuilding the source page.

Jump to content

Template:Row hover highlight/doc

From Wikipedia, the free encyclopedia

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}}

[edit]

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-12-13-1
1-22-23-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-12-13-1
1-22-23-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

123
1-12-13-1
1-22-23-2

Using {{mw-datatable}} for white background

[edit]

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-12-13-1
1-22-23-2

See also

[edit]

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.