Position relative is not working on thead

Question

I have tried to add background on header (thead) with the help of pseudo element (:after) because i need to display background to one edge to another edge (including both left and right side padding) but thead is not taking position relative and thead background which is coming from pseudo element (:after) is relative to the body, because of this background showing on whole body.

Here 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:

Because i need to set background outside of the thead (including both left and right side padding) , you can refer expected screen shot — Mak0619, Feb 04 '20 at 10:23

Johannes · Answer 1 · 2020-02-04T10:30:54.953

You can simply apply the background to all th elements. If your concern is to have the background cover also the padding created by your table-wrapper element, a pseude-element solution wouldn't work, since thead is inside of that wrapper element - the padding wouldn't be covered. In this case you need to add the left and right padding to the first/last cells of each row as done here:

body {
  margin: 0;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  text-align: left;
  padding: 8px;
}

th {
  background-color: #c1c1c1;
}

th:first-child, td:first-child {
  padding-left: 25px;
}
th:last-child, td:last-child {
  padding-right: 25px;
}

<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>

Thanks for the answer...But my main concern is set background outside of the thead (including both left and right side padding). And why thead is not taking position relative, you can refer expected screen shot — Mak0619, Feb 04 '20 at 10:29
Thanks @Johannes, I checked you answer...You added the padding both side which is not solved my problem..I updated the expected screen shot for the better understanding. — Mak0619, Feb 05 '20 at 07:32

score 0 · Answer 2 · answered Feb 04 '20 at 10:44

0

Your problem is because you have used height:100%; in the :after pseudoelement.

As you can see here, using a percent height on a html element requieres his parent to have a fixed height and your thead has none.

Unfortunately you can't set a working height on a table row as you can read here, so I don't think you'll be able to acomplish what you want just with CSS.

answered Feb 04 '20 at 10:44

Alvaro Menéndez

8,766
3
37
57

Thanks @Alvaro. I used height: 100% in :after, because i gave position relative to his parent thead..but thead is not picking the position relative.This is the main issue – Mak0619 Feb 05 '20 at 08:45

Position relative is not working on thead

2 Answers2