是否可以在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>

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>

以上链接将进一步解释您。它还支持所有方向，垂直，水平或对角线。

Answer 3

为什么不简单地使用 backgroundImage: 'linear(to bottom right, black)' （在反应样式属性中）??