Deleatur yhe: 1 revision imported

2026-09-10T09:42:28Z

1 revision imported

← Older revision	Revision as of 09:42, 10 September 2026
(No difference)

wikipedia>IamNikita: replaced hardcoded colors with style variables

2026-07-17T22:10:31Z

replaced hardcoded colors with style variables

New page

{{Documentation subpage}}{{tsh|mw-datatable}}
{{High-use}}
{{uses TemplateStyles|Template:Row hover highlight/styles.css}}
This template enables {{font color |var(--color-base, #202122) |var(--background-color-progressive-subtle, #f1f4fd) |row hover highlighting}} via wikitable class modifiers {{type|mw-datatable}} and {{type|hover-highlight}}.

In addition to adding row highlights, {{type|mw-datatable}} also changes the background of the cells to white. To only add a highlight, use {{type|hover-highlight}}.

== Using <nowiki>{{row hover highlight}}</nowiki> ==
Basic usage:
<div style="display:inline-grid; border: 2px solid var(--border-color-option-lime); padding: 0.5em; background-color:var(--background-color-base); color:var(--color-base)">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1-2">
{{row hover highlight}}
{| class=mw-datatable
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</syntaxhighlight></div>

<div style="display:inline-grid; border: 2px solid var(--border-color-option-lime); padding: 0.5em; background-color:var(--background-color-base); color:var(--color-base)">
'''Rendered result'''
{{row hover highlight}}
{| class=mw-datatable
|-
! 1
! 2
! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</div>

<code>class=mw-datatable</code> can be used in combination with <code>class=wikitable</code>, in which case the non-header cells will have a white background.

<div style="display:inline-grid; border: 2px solid var(--border-color-option-lime); padding: 0.5em; background-color:var(--background-color-base); color:var(--color-base)">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1-2">
{{row hover highlight}}
{| class="wikitable mw-datatable"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</syntaxhighlight></div>

<div style="display:inline-grid; border: 2px solid var(--border-color-option-lime); padding: 0.5em; background-color:var(--background-color-base); color:var(--color-base)">
'''Rendered result'''
{{row hover highlight}}
{| class="wikitable mw-datatable"
|-
! 1
! 2
! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</div>

To keep the light gray background from <code>class=wikitable</code>, use <code>class=hover-highlight</code>:

<div style="display:inline-grid; border: 2px solid var(--border-color-option-lime); padding: 0.5em; background-color:var(--background-color-base); color:var(--color-base)">
'''Wikitext'''
<syntaxhighlight lang="wikitext" highlight="1-2">
{{row hover highlight}}
{| class="wikitable hover-highlight"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</syntaxhighlight></div>

<div style="display:inline-grid; border: 2px solid var(--border-color-option-lime); padding: 0.5em; background-color:var(--background-color-base); color:var(--color-base)">
'''Rendered result'''
{{row hover highlight}}
{| class="wikitable hover-highlight"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</div>

== Using <nowiki>{{mw-datatable}}</nowiki> 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.

<div style="display:inline-grid; border: 2px solid var(--border-color-option-lime); padding: 0.5em; background-color:var(--background-color-base); color:var(--color-base)">
'''Wikitext'''
<syntaxhighlight lang=wikitext highlight="1-2">
{{mw-datatable}}
{| class="wikitable mw-datatable"
|-
! 1 !! 2 !! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</syntaxhighlight></div>

<div style="display:inline-grid; border: 2px solid var(--border-color-option-lime); padding: 0.5em; background-color:var(--background-color-base); color:var(--color-base)">
'''Rendered result'''
{{mw-datatable}}
{| class="wikitable mw-datatable"
|-
! 1
! 2
! 3
|-
| 1-1 || 2-1 || 3-1
|-
| 1-2 || 2-2 || 3-2
|}
</div>

==See also==
*{{section link|Help:Table/Advanced|Highlight rows on hover}}
* {{t|shy}} – Can be used to help narrow columns by adding a [[soft hyphen]] to a word to allow it to wrap.
More [[WP:template styles|template styles]] for tables:
* {{t|sticky header}} - makes column headers stick to the top of the page while scrolling through table data.
* {{t|sort under}} - moves the sorting arrows under the headers.
* {{t|static row numbers}} - adds a column of row numbers to a table.
* {{t|table alignment}} - aligns the cells in a column, or a whole table.

<includeonly>{{Sandbox other||

[[Category:Table templates]]
[[Category:Templates using TemplateStyles to style external elements]]
}}</includeonly>

Template:Row hover highlight/doc - Revision history

Deleatur yhe: 1 revision imported

wikipedia>IamNikita: replaced hardcoded colors with style variables