2

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:

enter image description here

dev sandbox
  • 474
  • 10
  • add position;relative to the table element – Temani Afif Nov 16 '20 at 20:20
  • @TemaniAfif That makes the overlayed element relative to the `table` and overlays the entire `table` opposed to overlaying just the `tbody` element: https://jsfiddle.net/q8mors7u/ – dev sandbox Nov 16 '20 at 20:24
  • Your snippet appears to be working as you expect it to. The `::after` is only over the `` element. – disinfor Nov 16 '20 at 20:29
  • @disinfor I updated the question with a photo of the desired result. The snippet as is shows that border around the whole window. Not just the `tbody` element. – dev sandbox Nov 16 '20 at 20:39
  • Your snippet shows exactly what's in your photo you've added. https://imgur.com/a/Ob9QZMq – disinfor Nov 16 '20 at 20:42
  • @disinfor I don't know what browser you're using but on Chrome. The most popular browser, its showing as if I don't have `position: relative;` on the `tbody` element and stretching the teal colored rectangle across the entire window. – dev sandbox Nov 16 '20 at 20:44
  • I'm using FireFox...another popular browser. – disinfor Nov 16 '20 at 20:44
  • @disinfor Shame everyone in the world isn't on Firefox then. Otherwise I wouldn't have to ask this question O.o – dev sandbox Nov 16 '20 at 20:45
  • 1
    https://www.sitepoint.com/community/t/before-in-chrome-vs-firefox/224105/6 You should also update your question to include this is happening on Chrome. You're more likely to get the help you want. – disinfor Nov 16 '20 at 20:45
  • I just want to say to future visitors that `transform: scale( 1 );` added to `tbody` is the solution here for Chrome atleast. – dev sandbox Nov 16 '20 at 21:29

0 Answers0