line through vaadin row

Question

I want to make a row in the table to look like a crossed out. I tried using text-decoration but it affects only text

.v-table-row.v-table-row-highlight-red,
.v-table-row-odd.v-table-row-highlight-red {
  background-color: #ff0000;
  white-space: pre-wrap !important;
  text-decoration: line-through;
}

How to line through through the whole row?

I set code generator for table like this

table.setCellStyleGenerator((source, itemId, propertyId) - > {
  return "highlight-red";
});

Answer 1

You can't do this with a normal way but there is a workaround. You can use box-shadow to simulate the cross line on a before pseudo element.

Like this:

table {
  border-spacing: 0;
}

td {
  position: relative;
  border: 1px solid;
}

tr.deleted td:before {
  content: "";
  box-shadow: 0 0 0 1px #000;
  width: 100%;
  position: absolute;
  top: 50%;
}

<table>
  <tr class="deleted">
    <td>
      deleted row
    </td>
     <td>
      deleted row
    </td>
     <td>
      deleted row
    </td>
     <td>
      deleted row
    </td>
  </tr>
  <tr>
    <td>
      regular row
    </td>
     <td>
      regular row
    </td>
     <td>
      regular row
    </td>
     <td>
      regular row
    </td>
  </tr>
</table>