I am trying to implement an hover effect on a table in a webpage so when I put my mouse on the row the row turns grey but everything else is white
So I have the basic styling just to ensure that its not my workplace thats bugged and well it works now when I implement it in the bigger code, nothing happens. I am new to working with CSS so I have no idea how to fix this. I was wondering if it is because I set the entire table container to white but how do i set the table to white but still implement the hover effect without them both affecting each other.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Hover Effect</title>
<style>
.specific-table-container {
margin: 20px auto; /* Centers the table on the page with some margin */
width: 90%; /* Adjusts width to not span the full width of the view */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adds subtle shadow around the div */
padding: 20px;
background-color: #fff; /* Ensures the background is white */
}
.specific-table-container table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* Ensures consistent column sizing */
}
.specific-table-container th, .specific-table-container td {
border: 1px solid #ccc; /* Lighter border color */
padding: 8px;
text-align: left;
background-color: #fff; /* White background for all cells */
}
.specific-table-container tr:hover {
background-color: #f2f2f2; /* Grey color on hover */
}
</style>
</head>
<body>
<div class="specific-table-container">
<table>
<tbody>
<tr>
<th scope="row">Text</th>
<td>{text}</td>
<th>List</th>
<td>{list:label}</td>
</tr>
<tr>
<th scope="row">Text</th>
<td>
<p>{text}</p>
</td>
<th>List</th>
<td>{list:label}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Hover Test</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
tr:hover {
background-color: #f2f2f2; /* Grey color on hover */
}
</style>
New contributor
kinruyuu is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.