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

Question

I have a html table. In the table on a particular condition i need to strike out the row, the issue is while i am able to overlap the image over normal cells the textboxes come over the strikeout line.

Below code:

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

Image :

Answer 1

A background such as you have cannot overlay content.

I'd suggest using a positioned pseudo-element on the td in your selected row*.

*You cannot position absolutely in relation to a tr.

So something like this:

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>