Bootstrap 4 offers a convenient table feature, but I'm having trouble aligning it with the design provided to me. The design requires full-width background colors for both the dark header (thead) and the light body (tbody), all while keeping the elements within the Bootstrap container as shown in the image below:
To achieve this, I attempted enclosing the entire table within a container, but couldn't figure out how to implement the full-width backgrounds.
I've tried using CSS to style the table headers and tbody, but integrating them seamlessly inside the Bootstrap container has proven challenging.
Here are examples of my attempts:
.table .thead-dark th {
background-color: #333333 !important;
}
tbody {
background: lightgrey;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>Further experimentation involved applying the .container class to individual rows but did not yield the desired result.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table">
<thead class="thead-dark">
<tr class="container">
<div class="row">
<div class="col">
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</div>
</div>
</tr>
</thead>
<tbody>
<tr class="container">
<div class="row">
<div class="col">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</div>
</div>
</tr>
<tr class="container">
<div class="row">
<div class="col">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</div>
</div>
</tr>
<tr class="container">
<div class="row">
<div class="col">
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</div>
</div>
</tr>
</tbody>
</table>