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.
Similar Code Snippets:
CSS Animated Glowing Social Icons
Expand and Collapse Table Rows in HTML CSS
15+ Background Image With Text Overlay
Mask Image and Text Using CSS Clip Path and SVG
9+ Simple Speech Bubble in CSS
Image Inside Text using CSS
CSS Vertical Text Bottom To Top
HTML5 Canvas Examples with Source Code
Button Shimmer Effect on Hover Using CSS
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.