在具有 html 个元素 [文本框、组合框等] 的 table 中划掉一行

Question

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

下面的代码：

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

在具有 html 个元素 [文本框、组合框等] 的 table 中划掉一行

Strikeout a row in table having html elements[textbox, combox,etc]

html

css

input

strikethrough