是否可以在HTML表格中划掉单元格？

Question

我想创建一个HTML表格,我可以在其中删除单元格,如下图所示:

我最初想过在单元格中做一个CSS直角三角形,但我无法弄清楚如何只为斜边而不是其他两边或三角形本身着色.

换句话说,我想做的是什么？
用对角线制作图像然后使图像伸展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>