<分区>
最佳答案
有许多选项可用于执行您的任务。其中之一是绝对定位中的伪元素。我们将每个伪元素拉伸(stretch)到父单元格的整个区域,并使用 background
属性绘制一条对 Angular 线。一个伪元素从左上角到右下角,第二个伪元素从左下角到右上角。无论单元格的宽度或高度如何 - 线条将从一个 Angular 到另一个 Angular 。如果您需要单元格内容位于行的顶部,则需要使用 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) );
}
还有一个例子:
关于html - 如何在表格的单元格中制作一条左右对 Angular 线,如交叉线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55604404/