HTML Table Highlight Row and Column on Hover

HTML Table Highlight Row and Column on Hover
Code Snippet:Modern CSS only column hover
Author: Sten Hougaard
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 619
License: MIT
Edit Code online: View on CodePen
Read More

This code snippet helps you to create an HTML table where row and column highlight on hover. It uses CSS to change background colors on hover, making it easier to read and navigate data. This feature helps users visually track rows and columns while interacting with the table.

You can use this code in web applications displaying data tables. It helps users quickly identify rows and columns, enhancing the table’s readability.

How to Highlight Table Row and Column on Hover

1. Start by creating an HTML file and set up the basic structure. Insert the HTML code for the table within the <body> tag. Adjust the table structure and content to match your data. You can modify the table headers, rows, and data cells according to your needs.

<div>
	<h1>Modern CSS only column hover</h1>
	<label>Row hover: <input type="checkbox" name="rowHover" /></label>
	<label>Column hover: <input type="checkbox" name="columnHover" checked /></label>
	<table class="columnHover">
		<thead>
			<tr>
				<th>Number of training data</th>
				<th>Number of training parameters</th>
				<th>Accuracy</th>
				<th>Precision</th>
				<th>Recall</th>
				<th>F1-score</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>123</td>
				<td>456</td>
				<td>789</td>
				<td>1011</td>
				<td>1213</td>
				<td>1415</td>
			</tr>
			<tr>
				<td>234</td>
				<td>567</td>
				<td>890</td>
				<td>1112</td>
				<td>1314</td>
				<td>1516</td>
			</tr>
			<tr>
				<td>345</td>
				<td>678</td>
				<td>901</td>
				<td>1213</td>
				<td>1415</td>
				<td>1617</td>
			</tr>
			<tr>
				<td>1001</td>
				<td>1112</td>
				<td>1213</td>
				<td>1314</td>
				<td>1415</td>
				<td>1516</td>
			</tr>
			<tr>
				<td>1002</td>
				<td>1113</td>
				<td>1214</td>
				<td>1315</td>
				<td>1416</td>
				<td>1517</td>
			</tr>
			<tr>
				<td>1003</td>
				<td>1114</td>
				<td>1215</td>
				<td>1316</td>
				<td>1417</td>
				<td>1518</td>
			</tr>
			<tr>
				<td>1004</td>
				<td>1115</td>
				<td>1216</td>
				<td>1317</td>
				<td>1418</td>
				<td>1519</td>
			</tr>
			<tr>
				<td>1005</td>
				<td>1116</td>
				<td>1217</td>
				<td>1318</td>
				<td>1419</td>
				<td>1520</td>
			</tr>
		<tfoot><tr><td colspan="6"><small>These dummy data generated using Google Bard</small></td></tr></tfoot>
		</tbody>
	</table>
</div>

2. Create a separate CSS file (styles.css) or include the CSS code within a <style> tag in the HTML file. The following CSS controls the hover effects on rows and columns.

:root {
	--hover: transparent;
	--row-hover: transparent;
}
html,
body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	font-family: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro,
		sans-serif;
	font-weight: normal;
}

body {
	display: grid;
	place-content: center;
	font-family: ;
}
td,
th {
	text-align: right;
	padding: 0.5em 1em;
}

th {
	white-space: normal;
	vertical-align: bottom;
	max-width: 90px;
	word-wrap: break-word;
}

body:has([name="rowHover"]:checked) tbody tr:hover
{
	--hover: hsla(240, 95%, 80%, 1);
	--row-hover: hsla(50, 95%, 60%, 1);
}
body:has([name="columnHover"]:checked)
{
		--hover: hsla(50, 95%, 60%, 1);
}

tr:hover {
	background: var(--row-hover);
}

table:has(td:nth-child(1):hover, th:nth-child(1):hover) {
	& th:nth-child(1),
	& tbody td:nth-child(1) {
		background: var(--hover);
	}
}
table:has(td:nth-child(2):hover, th:nth-child(2):hover) {
	& th:nth-child(2),
	& tbody td:nth-child(2) {
		background: var(--hover);
	}
}
table:has(td:nth-child(3):hover, th:nth-child(3):hover) {
	& th:nth-child(3),
	& tbody td:nth-child(3) {
		background: var(--hover);
	}
}
table:has(td:nth-child(4):hover, th:nth-child(4):hover) {
	& th:nth-child(4),
	& tbody td:nth-child(4) {
		background: var(--hover);
	}
}
table:has(td:nth-child(5):hover, th:nth-child(5):hover) {
	& th:nth-child(5),
	& tbody td:nth-child(5) {
		background: var(--hover);
	}
}
table:has(td:nth-child(6):hover, th:nth-child(6):hover) {
	& th:nth-child(6),
	& tbody td:nth-child(6) {
		background: var(--hover);
	}
}

Feel free to customize the hover colors by adjusting the HSLA values in the CSS code. Experiment with different shades to match your website’s theme.

That’s all! hopefully, you have successfully created HTML table Highlight Row And Column On Hover. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...