Положение родственника не работает над

Question

Я попытался добавить фон для заголовка (thead) с помощью псевдоэлемента (:after), потому что мне нужно отобразить фон от одного края к другому краю (включая как левый, так и заполнение правой стороны), но thead не занимает положение относительно, и thead фон, который исходит от псевдоэлемента (:after), относительно body, потому что этот фон в целом показывает body.

Вот мой код

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

Ожидаемое:

Answer 1

Вы можете просто применить фон ко всем th элементам. Если вы хотите, чтобы фоновая обложка также содержала padding , созданный вашим элементом table-wrapper, решение псевдоэлемента не сработало бы, поскольку thead равно внутри этого элемент обертки - отступы не будут закрыты. В этом случае вам нужно добавить левый и правый отступы к первой / последней ячейкам каждой строки, как здесь:

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>

Answer 2

Ваша проблема в том, что вы использовали height:100%; в псевдоэлементе :after.

Как вы можете видеть здесь , использование процентной высоты для элемента html требует его родитель должен иметь фиксированную высоту, а ваша thead - нет.

К сожалению, вы не можете установить рабочую высоту для строки таблицы, так как вы можете прочитать здесь , поэтому я не думаю, что вы Вы сможете sh, что вы хотите, просто с CSS.