table表格做一個表頭斜線樣式
阿新 • • 發佈:2019-02-02
* {
margin: 0;
padding: 0;
}
table {
border: 1px solid #fff;
/*去掉表格之間的空隙*/
border-collapse:collapse;
margin: 100px auto;
}
caption {
font-size: 20px;
font-weight: bold;
}
th,td{
border: 1px solid #ccc;
width: 80px;
font-size: 14px;
line-height: 40px;
text-align: center;
}
/*模擬對角線*/
.out{
border-top:40px #D6D3D6 solid;/*上邊框寬度等於表格第一行行高*/
width:0px;/*讓容器寬度為0*/
height:0px;/*讓容器高度為0*/
border-left:80px #BDBABD solid;/*左邊框寬度等於表格第一行第一格寬度*/
position:relative;/*讓裡面的兩個子容器絕對定位*/
}
b{
font-style:normal;
display:block;
position:absolute;
top:-40px;
left:-40px;
width :50px;
}
em{
font-style:normal;
display:block;
position:absolute;
top:-25px;
left:-70px;
width:55px;
}