如何在表格的单元格中制作左右对角线如十字线? [重复]

问题描述 投票:-1回答:1

这个问题在这里已有答案:

我想要结果Like Microsoft Excell

html css
1个回答
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

© www.soinside.com 2019 - 2024. All rights reserved.