如何在表格的单元格中制作左右对角线，如交叉线？ [复制]答案

【问题标题】：How to make a left and right diagonal like cross line in a cell of table? [duplicate]如何在表格的单元格中制作左右对角线，如交叉线？ [复制]
【发布时间】：2019-08-31 10:21:08
【问题描述】：

我想要结果Like Microsoft Excell

【问题讨论】：

我明白，但请看我分享的图片。这是不同的:(
我想要两条对角线，就像我分享的图片一样
这有可能吗？
您尝试过使用X图像并将其设置为背景并设置background-size:100% 100%;吗？
如果您愿意，请回答并提供您可以分享的代码和图像示例，这将对我有所帮助。不好意思，还没试过:(

标签： html css

【解决方案1】：

有许多选项可用于实施您的任务。其中之一是绝对定位中的伪元素。我们在父单元格的整个区域上拉伸每个伪元素，并使用background 属性绘制一条对角线。一个伪元素从左上角到右下角，第二个-从左下角到右上角。无论单元格的宽度或高度如何 - 线条将从一个角落到另一个角落。如果您需要单元格内容位于行的顶部，则需要使用 z-index 属性将其定位在伪元素上方。

HTML：

<table>
  <tr>
    <td class="cross">
      <span>Text</span>
    </td>
    <td>
      <span>Text</span>
    </td>
    <td class="cross">
      <span>Text</span>
    </td>
  </tr>
</table>

CSS：

td {
  border: 1px solid #222;
}

.cross span {
  position: relative;
  z-index: 2;
}

.cross {
  position: relative;
  width: 200px;
  height: 100px;
  text-align: center;
}

.cross:before,
.cross:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.cross:before {
  background: linear-gradient(to top right, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}

.cross:after {
  background: linear-gradient(to left top, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px) );
}

还有一个例子：

https://codepen.io/anon/pen/WWRqra

【讨论】：