Modified:
Here is the table along with its corresponding CSS styling:
.table-hover tbody tr:hover {
background-color: #fff !important;
}<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269766974">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Type</th>
<th scope="col">Column heading</th>
<th scope="col">Column heading</th>
<th scope="col">Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Default</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-primary">
<th scope="row">Primary</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-dark">
<th scope="row">Primary</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</body>
</html>The issue I'm encountering is that the row without a specific class receives the background color when hovered, but the row with the "table-primary" class remains unchanged. I've attempted various combinations to fix this problem without success.
.table {
&.table-primary:hover,
&.table-primary tr:hover {
background-color: #fff !important;
}
}What steps can I take to resolve this issue?
Visit Stack Blitz for more details