代码之家 › 专栏 › 技术社区 › lapots

穿过瓦丹街的线路

text-decorations css

lapots · 技术社区 · 6 年前

我想在桌子上划一行,看起来像被划掉的。我试过用 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";
});

1 回复 | 直到 6 年前

Mosh Feu Alex Chen 6 年前

你不能用一种正常的方式来做这件事,但是有一个解决办法。你可以用 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>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前