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

Question

我想创建一个HTML表格，可以像下面的图示一样划掉单元格： 我最初想到在单元格中使用CSS右三角形，但是我无法弄清如何仅涂色斜边而不涂色其余两个侧面或三角形本身。

换句话说，我想做的事情是可能的吗？ 制作一个带有对角线的图像，然后使该图像拉伸到单元格的100％宽度和高度是最明智的选择吗？ 谢谢。

- HartleySan

---

可能重复 - https://dev59.com/6GMm5IYBdhLWcg3wdeua意思是此问题可能与另一个问题重复，后面给出了相关的链接。 - Paulie_D

你可以添加一个带有背景图片的类。 - Andrew

JavaScript解决方案在这里：https://dev59.com/lWsz5IYBdhLWcg3wFT4f - Renfei Song

仅使用CSS的解决方案 https://dev59.com/DmUq5IYBdhLWcg3wT-6D - Pugazh

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
{
  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>

- Nico O

---

不错的解决方案。请记住，IE8和IE9无法显示这些渐变效果。http://caniuse.com/#feat=css-gradients - Damien

@Damien，感谢你的评论。你是对的。如果这些浏览器在要求列表中，你将不得不准备一个后备方案，可能使用静态图像或其他已链接的解决方案。 - Nico O

这个解决方案不适用于旧版本的浏览器...我正在尝试找到一个解决方案在IE8中完成（但并不容易） - Daniel Paiva

使用某些尺寸时，我在右下角看到了一小部分线条。添加 background-repeat: no-repeat; 解决了这个问题。 - Daniel

在一列中，是否可以在多个tr上使用线性渐变？ - Mehdi Abbassi

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>

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

- zms

Answer 3

为什么不直接使用 backgroundImage: 'linear(to bottom right, black)'（在React样式属性中）呢？

- Grégoire Baumann