Menu
I am studying tables in Bootstrap 4. I don't know why the background-color in table-light class is not applied. Is this because table-light cannot override the thead-dark? If it is true, can you tell me what makes thead-dark take priority over? If it is not what I think, please explain the reason behind it for me.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<title>Table</title>
</head>
<body>
<div class="container">
<h2>Contextual Classes</h2>
<p>Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:</p>
<table class="table">
<thead class="thead-dark">
<tr>
<th class="table-light">Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>[email protected]</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>[email protected]</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>[email protected]</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>[email protected]</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>[email protected]</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>[email protected]</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body> <!-- source: https://www.w3schools.com/bootstrap4/bootstrap_tables.asp -->Problem:
617
asked Nov 19 '25 09:11
This is how .thead-light is defined in the Bootstrap stylesheet.
.table .thead-light th {
color: #495057;
background-color: #e9ecef;
border-color: #dee2e6;
}
You see it targets th elements which are descendants of an element which has the thead-light class.
So when you apply the class to a th element, as you do in
<th class="table-light">Firstname</th>
you would need to target
th.thead-light {
/* CSS */
}
Otherwise the specificity of .table-dark > th will override that of <th class="table-light">
.table-dark,
.table-dark > th, /* <<< This rule */
.table-dark > td {
background-color: #c6c8ca;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
