CSS：适合其td并保持在td内容之上的div覆盖[重复]

Question

我希望 div 覆盖它们的 td 容器，同时完全填充它们（宽度和高度）。它们还应该位于 td 内容之上（在其文本之上）

问题在于表格是响应式的，因此 td 的宽度可变。

一件重要的事情：列数是未知的，用户可以实时更改。所以我不能使用 'calc( (100% /x) - 1px )'...

我怎样才能做到这一点？

这是 jsFiddle： https://jsfiddle.net/4vq8ao6r/4/

尝试使用绝对定位的 div，但我尝试了很多没有令人满意的结果。 我可以用 jQuery 实现这一点，但它的资源很重（尤其是在调整大小时），如果可能的话我想只使用 css。

html:

    <table>
      <thead>
        <tr>
          <th></th>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
          <th>Col4</th>
        </tr>
      </thead>
       <tbody>
       <tr>
          <td>Row1</td>
          <td>
              Data1
              <div class="overlay"></div>
          </td>
          <td>
              Data2
              <div class="overlay"></div>
          </td>
          <td>
              Data3
              <div class="overlay"></div>
          </td>
          <td>
              Data4
              <div class="overlay"></div>
          </td>
        </tr>
       <tr>
          <td>Row2</td>
          <td>
              Data1
              <div class="overlay"></div>
          </td>
          <td>
              Data2
              <div class="overlay"></div>
          </td>
          <td>
              Data3
              <div class="overlay"></div>
          </td>
          <td>
              Data4
              <div class="overlay"></div>
          </td>
        </tr>
      </tbody>
    </table>

CSS：

html,body{
    pointer-events: auto;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    background:#212933;
    color:#e5ebea;
    font-family:'lato';
    font-weight:400;
    font-size:11px;
    user-select:none;
  text-align:center;
}

table{
    display:table;
    white-space:nowrap;
    border-collapse:collapse;
    table-layout:fixed; 
    user-select:none;
    width:100%;
}

tr{
    display:table-row;
}

th {
    display:table-cell;
    text-overflow:ellipsis;
    vertical-align:middle;
    padding-right:19px;
    padding-left:10px;
    background:#2e3844;
    border:1px solid #56647c;
    overflow:hidden;
  height:40px;
}

th:first-child{
    background:#212933;
}

td {
    display:table-cell;
    vertical-align:middle;
    padding:6px;
    border:1px solid #56647c;
    overflow:hidden;
  height:40px;
}
td:first-child{
    background:#28303a;
}

.overlay{
  background:red;
  height:40px;
  position:absolute;
  opacity:0.5;
  width:100px;
}

Answer 1

这个怎么样？基本上 - 使 td 位置：相对；然后你的 abs 定位覆盖可以将 top/right/bottom/left 全部设置为 0

html,body{
    pointer-events: auto;
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    background:#212933;
    color:#e5ebea;
    font-family:'lato';
    font-weight:400;
    font-size:11px;
    user-select:none;
  text-align:center;
}

table{
    display:table;
    white-space:nowrap;
    border-collapse:collapse;
    table-layout:fixed; 
    user-select:none;
    width:100%;
}

tr{
    display:table-row;
}

th {
    display:table-cell;
    text-overflow:ellipsis;
    vertical-align:middle;
    padding-right:19px;
    padding-left:10px;
    background:#2e3844;
    border:1px solid #56647c;
    overflow:hidden;
  height:40px;
}

th:first-child{
    background:#212933;
}

td {
    display:table-cell;
    vertical-align:middle;
    padding:6px;
    border:1px solid #56647c;
    overflow:hidden;
  height:40px;
  position: relative;
}
td:first-child{
    background:#28303a;
}

.overlay{
  background:red;
  height:40px;
  position:absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity:0.5;
  width:100px;
}

https://jsfiddle.net/chmxnvzb/ ?