In this post I will show you an example of CSS hover effects for a HTML table.

CSS :Hover

CSS :hover effects can create a massive change in your users experience by adding a change to elements in a webpage. The hover effect takes place when a cursor moves over said element. When there is no cursor, such as mobile devices, the effect will happen if the user engages with the element ( touch ).

Unlike animations in CSS, you do not need to specify an animation name and keyframes. The attributes set in the :hover { } syntax will be applied when the item returns true to the hover action and false when the user navigates away.

Code

In This guided example, I will show you a simple HTML table that has a CSS :hover effect applied to the Tablerows.

General Page Setup

Simple page with a centered table nested in a centered div.

<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/* CSS code here */

</style>
</head>
<body>
    <div class="center"> 
		<div class="table">
			<table>
				<thead>
					<tr>
						<th colspan = "3">Main Header</th>
					</tr>
				</thead>
				<thead>
					<tr>
						<th>ID</th>
						<th>Username</th>
						<th>Drinks Coffee?</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>roger_t</td>
						<td>Yes</td>
					</tr>
					<tr>
						<td>2</td>
						<td>cindy_p</td>
						<td>Yes</td>
					</tr>
					<tr>
						<td>3</td>
						<td>bob_l</td>
						<td>No</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</body>
</html>

CSS

Next the CSS for the HTML page setup. General setup, not much here to explain except for the .center div.

DIV To Center

.center

width

is set to 90% because the hover effect will make the table rows grow. We want to see the whole length of the table in the UI.

html {
	background-color: #004e5c;
}

body {
	color: whitesmoke;
  	background-color: #004e5c;
	display: flex;
	flex-direction: column;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
	width: 100vw;
	height: 100vh;
	margin: auto;
	padding: 0;
}

.center {
	width: 90%;
	margin: auto;
}

.table {
	align-content: center;
  display: grid;
}

HTML Table

table

border-collapse

collapse set to not show borders between cell elements

table {
	border-collapse: collapse;
}

HTML Table Cell

.table td

The styling attributes for the table cells in the tablerow.

padding	gives a little extra space around the table cell data
text-align	align the text to the left
transition	used to create the animation transition when the user navigates away from the hovered item. Animates all attributes in 1 second. The second part color 0, prevents the text color from animating in transition.

.table td {
	padding: 15px;
	text-align: left;
	transition: all 1s , color 0;
}

Cell element :first-child

.table td:first-child

This styles the first child of the td elements in the the tablerows.

text-align

denoted by :first-child, only set the text of the first cell data item in the center

.table td:first-child {
	text-align: center;
}

Cell element :last-child

.table td:last-child

This styles the last child of the td elements in the tablerows.

text-align

denoted by :last-child, only set the text of the last cell data item in the to the right

.table td:last-child {
	text-align: right;
}

Headers For The Table

.table th

Styling for the header elements in the table.

padding	add some space around the table header text
text-align	align the text in the table header in the center
border-left	set left border of table header
border-bottom	set bottom border of table header
background-color	set background color

.table th {
	padding: 15px;
	text-align: center;
	border-left: black 2px solid;
	border-bottom: black 2px solid;
	background-color: coral;
}

Tablerow :hover For Table Cell

tbody tr:hover td

The following attributes are so to the child elements of the tablerow that is being hovered over.

color	change the text color on hover
transition	animate the color attribute in a duration of 1 sec
position	sets the initial position of the HTML element spec. Used this to help align the columns appropriately during the hover animation.

tbody tr:hover td {
    color: black;
	transition: color 1s;
	position: initial;
}

Table Row :hover

tbody tr:hover

Lastly, the attributes to apply to the tablerow itself that has the hover action.

box-shadow	creates a decorative shadow around the tablerow
background-color	change the background color of the tablerow
border	ensures no borders are applied to the tablerow
position	relative positioning to the elements normal position
transform	scaleX(1.05) will scale the element across the X axis by a scale of 1.05

tbody tr:hover {
	box-shadow: 0px 1px 20px 2px #9bd3ddb5;
  background-color: white;
  border: none;
  position: relative;
  transform: scaleX(1.05);
}

Results

Finally the results.

I hope this was helpful.