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位置设为：相对；然后您的腹肌定位叠加层可以将顶部/右侧/底部/左侧全部设置为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/？

CSS：适合其td且位于td内容顶部的div覆盖

1 个答案: