My attempted solution involved adding th and tfoot. However, I faced issues with applying borders to only the td elements - border was not being applied at the bottom of the table, and the thickness and color of the borders were inconsistent between columns.
Here is the code snippet I used:
.table {
border: 1px solid black;
}
.table thead th {
border-top: 1px solid #000!important;
border-bottom: 1px solid #000!important;
border-left: 1px solid #000!important;
border-right: 1px solid #000!important;
}
.table td {
border-left: 1px solid #000!important;
border-right: 1px solid #000!important;
border-top: none!important;
}
tbody>tr:nth-child(odd) {
background: #F8F8F8
}
tfoot>tr:nth-child(odd),
thead {
background: #E3ECFC
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<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="54363b3b20272026352414617a667a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e928e93">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<table class="table table-borderless ">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>123</td>
<td>456</td>
</tr>
<tr>
<td>2</td>
<td>name2</td>
<td>xyz</td>
<td>abc</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>4</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>5</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tfoot>
</table>
</body>
</html>The desired output can be viewed here: https://i.sstatic.net/8vs2B.jpg