在具有 html 元素[文本框、组合框等]的表格中删除一行

【问题标题】：Strikeout a row in table having html elements[textbox, combox,etc]在具有 html 元素[文本框、组合框等]的表格中删除一行
【发布时间】：2019-12-17 11:23:03
【问题描述】：

我有一个 html 表格。在特定条件下的表格中，我需要删除该行，问题是当我能够将图像重叠在普通单元格上时，文本框会出现在删除线上方。

以下代码：

<tr class="strikeout" style="/background: transparent url('c:/img/strike.png') 0 50% repeat-x;z-index: 999999999999999999999;position: relative;">

图片：

【问题讨论】：

你能把你的代码放在sn-p里吗？
@Paulie_D - 这是我的要求。
请输入您的代码。所以我们可以检查一下。

标签： html css input strikethrough

【解决方案1】：

像你这样的背景不能覆盖内容。

我建议在您选择的行中的td 上使用定位伪元素*。

*您不能相对于tr 进行绝对定位。

所以是这样的：

table {
  table-layout: fixed;
}

td {
  position: relative;
  text-align: center;
}

.strikeout td:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 6px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: red;
  z-index: 1
}

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr class="strikeout">
    <td><input type="text"></td>
    <td><button>button</button></td>
    <td>
      <select name="" id="">
        <option value="">Option1</option>
        <option value="">Option2</option>
        <option value="">Option3</option>
      </select>
    </td>

  </tr>
  <tr>
    <td>John</td>
    <td><button>Button</button></td>
    <td>80</td>
  </tr>
</table>

【讨论】：