I attempted to create a background for the header (thead) using a pseudo element (:after) because I wanted the background to span from one edge to another edge (including both left and right side padding). However, thead is not taking a relative position and the background from the pseudo element (:after) is relative to the body, causing the background to display on the entire body.
Below is my code:
.table-wrapper {
padding: 0 25px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
text-align: left;
padding: 8px;
}
thead {
position: relative;
}
thead:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
display: block;
background-color: #c1c1c1;
height: 100%;
z-index: -1;
}<div class="table-wrapper">
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email Address</th>
<th>Indicator</th>
<th>Position</th>
<th>Mobile</th>
<th>Status</th>
<th>Created On</th>
<th>Last Login</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
</tr>
<tr>
<td>January</td>
<td>$200</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>January</td>
</tr>
</tbody>
</table>
</div>Expected Result: https://i.stack.imgur.com/1toZQ.png