HTML或CSS中的斜线?

我要做成这样的桌子 CSS对角线罢工

可以在表格中添加倾斜的对角线边框吗?

回答:

基于CSS3线性梯度解决方案,但角度不是硬编码的:

table:nth-of-type(1) td {

background-image: linear-gradient(

to top right,

white 48%,

black,

white 52%

);

}

table:nth-of-type(2) td {

background-image: linear-gradient(

to top right,

papayawhip calc(50% - 1px),

black,

papayawhip calc(50% + 1px)

);

}

/* for testing */

table {

border-collapse: collapse;

margin-top: 1em;

margin-bottom: 1em;

}

td:nth-child(odd) {

width: 10em;

}

td:nth-child(even) {

width: 20em;

}

<table border="1">

<tbody>

<tr>

<td>Narrow</td>

<td>Wide</td>

</tr>

<tr>

<td>Narrow</td>

<td>Wide</td>

</tr>

</tbody>

</table>

<table border="1">

<tbody>

<tr>

<td>Narrow</td>

<td>Wide</td>

</tr>

<tr>

<td>Narrow</td>

<td>Wide</td>

</tr>

</tbody>

</table>

以上是 HTML或CSS中的斜线? 的全部内容, 来源链接: utcz.com/qa/402899.html

回到顶部