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

Question

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

代码如下:

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

图片:

Answer 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>