有水平滚动条时添加删除线表格行答案

【问题标题】：Adding strikethrough table row when have horizontal scrollbar有水平滚动条时添加删除线表格行
【发布时间】：2021-07-19 15:54:13
【问题描述】：

我正在添加删除线表格行，但它只显示到表格水平滚动条，而不是在滚动条出现之后。

如何显示 100% 的滚动条我无法添加背景图像，因为表格行中已经有背景图像。

有没有其他方法可以解决这个问题。

我的代码

.TableWrap{
  overflow: auto;
  position: relative;
}

.strike{
  position: relative;
}

.strike:after {
    content: "";
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 4px;
    position: absolute;
    z-index: 111;
    left: 0;
    margin-top: 40px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="TableWrap">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th >1</th>
        <td><input type="checkbox"></td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr class="strike">
        <th>2</th>
        <td><input type="checkbox"></td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th>3</th>
        <td><input type="checkbox"></td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

从长远来看，这些样式设置方法将变得难以维护。

不过，你可以给你的TableWrap 类赋予display:inline-block 的样式，并将罢工者稍微调整一个负边距值。

您可以阅读有关布局的更多信息here

【讨论】：