通过vaadin行

Question

我想在表格中排成一排，看起来像是划掉了。 我尝试使用text-decoration，但只影响文字

.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;
}

如何在整行中排队？

我为这样的表设置了代码生成器

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

Answer 1

您无法通过常规方法执行此操作，但是有一种解决方法。您可以使用box-shadow在before伪元素上模拟交叉线。

赞：

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>