The tbody pseudo element is applying relative to the whole page and ignoring the position: relative on the tbody element itself. A similar question was solved by adding display: table; to the tbody element; but such a solution breaks the 3-column table here as the width of the parent table isn't respected anymore even when adding display: table; width: 100% to the tbody element itself. Any non JavaScript solutions to stretch an element over the whole tbody whatever its natural dimensions are?
thead {
background-color: #f2f2f2;
}
thead th:first-child {
border-top-left-radius: 1rem;
}
thead th:last-child {
border-top-right-radius: 1rem;
}
tfoot td:first-child {
border-bottom-left-radius: 1rem;
}
tfoot td:last-child {
border-bottom-right-radius: 1rem;
}
tbody {
position: relative;
background-color: #f7f7f7;
}
tbody::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 0.5rem solid #099;
background-color: #eee;
content: "";
opacity: 0.25;
}
tfoot {
background-color: #fbfbfb;
}<style>
* {
box-sizing: border-box;
}
html, body, table, caption, th, td, p {
margin: 0 auto;
padding: 1rem;
font-family: Arial;
text-align: left;
border-collapse: collapse;
}
html, body, table, caption, p {
width: 100%;
padding: 0;
border-style: none;
}
body {
padding: 1rem;
}
table {
max-width: 20rem;
}
</style>
<table>
<thead> <tr> <th>One</th><th>Two</th><th>Three</th> </tr> </thead>
<tbody> <tr> <td>four</td> <td>five</td><td>six</td> </tr> </tbody>
<tfoot> <tr> <td>seven</td> <td>eight</td><td>nine</td> </tr> </tfoot>
</table>The desired result is in the photo below:
