html - 是否可以划掉 HTML 表格中的单元格？

Question

我想创建一个 HTML 表格，我可以在其中划掉单元格，如下图所示:

我最初想在单元格中做一个 CSS 直 Angular 三 Angular 形，但我不知道如何只给斜边着色，而不给其他两条边或三 Angular 形本身着色。

换句话说，我想做的事情有可能吗？
制作带有对 Angular 线的图像，然后将该图像拉伸(stretch) 100% 的单元格宽度和高度是否最有意义？
谢谢。

Answer 1

好吧，这有点 hacky，但它确实有效。利用 linear-gradient

对当前单元格使用background-image，在内容下划线

table
{
  min-width: 100%;
}

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

table td.crossed
{
   background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px)); 
}

<table>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr>
      <td>Content</td>
      <td class="crossed">Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>

---

使用伪元素删除表格单元格内容

如果你想要删除单元格的内容，你也可以使用伪元素，像这样:

table
{
  min-width: 100%;
}

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

table td.crossed::after
{
  position: absolute;
  content: "";
  left:0;
  right:0;
  top:0;
  bottom:0;
   background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px)); 
}

<table>
  <tbody>
    <tr>
      <td>Content</td>
      <td>Content</td>
      <td>Content</td>
    </tr>
     <tr>
      <td>Content</td>
      <td class="crossed">Content</td>
      <td>Content</td>
    </tr>
  </tbody>
</table>