【css实现table斜线表头】
要使用CSS实现斜线表头,可以通过使用伪元素::before
或::after
来创建斜线效果。以下是一个简单的示例:
HTML:
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
</tr>
<!-- 其他行... -->
</table>
CSS:
table {
width: 100%;
border-collapse: collapse;
}
th {
position: relative;
background-color: #f2f2f2;
text-align: center;
padding: 10px;
}
th::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background-color: #000;
transform: translateY(-50%);
}
th::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 1px;
height: 100%;
background-color: #000;
transform: translateY(-50%);
}
td {
text-align: center;
padding: 10px;
border: 1px solid #ddd;
}
这段CSS代码会在每个<th>
元素中创建一个斜线效果,分别在顶部和右侧。通过调整伪元素的width
、height
和background-color
属性,可以自定义斜线的样式。
评论已关闭