相对位置在头上不起作用

Question

我尝试在 pseudo element (:after) 的帮助下在标题 (thead) 上添加背景，因为我需要将背景显示到一个边缘到另一个边缘（包括左侧和右侧填充）但thead没有相对位置，并且来自伪元素（:after）的thead背景相对于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 元素。如果您的问题是让背景也覆盖由table-wrapper 元素创建的填充，则伪元素解决方案将不起作用，因为thead 在inside该包装器元素的 - 填充不会被覆盖。在这种情况下，您需要将左右填充添加到每行的第一个/最后一个单元格，如下所示：

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

您的问题是因为您在:after 伪元素中使用了height:100%;。

如您所见here，在 html 元素上使用百分比高度要求其父级具有固定高度，而您的头没有。

不幸的是，您无法像 here 那样在表格行上设置工作高度，所以我认为您无法仅使用 CSS 来完成您想要的。