是否可以划掉 HTML table 中的单元格？

Question

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

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

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

Answer 1

好吧，这有点老套，但它确实有效。 利用 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 单元格内容

如果要在单元格的内容上加上删除线，也可以使用伪元素，像这样：

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>

Answer 2

 <style>
td.diagonalRising
{
   background: linear-gradient(to right bottom, #ffffff 0%,#ffffff     
   49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%);
}

td.diagonalFalling
{
  background: linear-gradient(to right top, #fff 0%,#fff 49.9%,#000000    
 50%,#000000 51%,#fff 51.1%,#fff 100%);
}
<style>

以上link将为您做进一步的解释。它还支持所有方向，垂直、水平或对角线。

Answer 3

你为什么不简单地使用 backgroundImage: 'linear(to bottom right, black)' （反应风格属性）??