通过 vaadin 行

Question

我想让 table 中的一行看起来像划掉的一样。我尝试使用 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 设置代码生成器

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>

通过 vaadin 行

line through vaadin row

css

text-decorations