<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>资费标准</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
table {
border-collapse: collapse;
border: 1px #e3e3e3 solid;
width: 96%;
}
th, td {
border: 1px solid #e3e3e3;
text-align: center;
background: #C6C7C6;
}
th {
background: #199fff;
color: white;
} /*模拟对角线*/
.out {
border-top: 5em #199fff solid; /*上边框宽度等于表格第一行行高*/
border-left: 200px #ff8838 solid; /*左边框宽度等于表格第一行第一格宽度*/
position: relative; /*让里面的两个子容器绝对定位*/
color:white;
}
b {
font-style: normal;
display: block;
position: absolute;
top: -4.3em;
left: -160px;
width: 200px;
}
em {
font-style: normal;
display: block;
position: absolute;
top: -35px;
left: -250px;
width: 200px;
}
td {
background-color: #FFF;
}
th,td{
min-width: 200px;
line-height: 41px;
}
</style>
</head>
<body style="background-color: #f0f0f6;color:#404040;">
<div style="width:100%;overflow-x:auto">
<table width="100%" style="word-break: keep-all">
<thead>
<tr>
<th style="width:200px;" rowspan="2">
<div class="out" >
<b>消费类型</b> <em>通话类型</em>
</div>
</th>
<th colspan="3">2019-12-19(周一)</th>
<th colspan="3">2019-12-20(周二)</th>
<th colspan="3">2019-12-21(周三)</th>
<th colspan="3">2019-12-22(周四)</th>
<th colspan="3">2019-12-23(周五)</th>
<th >2019-12-23(周六)</th>
<th >2019-12-23(周日)</th>
<th rowspan="2">教室</th>
</tr>
<tr>
<th>上午</th>
<th>下午</th>
<th>晚上</th>
<th>上午</th>
<th>下午</th>
<th>晚上</th>
<th>上午</th>
<th>下午</th>
<th>晚上</th>
<th>上午</th>
<th>下午</th>
<th>晚上</th>
<th>上午</th>
<th>下午</th>
<th>晚上</th>
<th>全天</th>
<th>全天</th>
</tr>
</thead>
<tbody>
<tr>
<td>中青一班</td>
<td>打好攻坚脱贫战</td>
<td rowspan="3">打好攻坚脱贫战123</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td rowspan="3">打好攻坚脱贫战123</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td rowspan="3">打好攻坚脱贫战123</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td rowspan="3">打好攻坚脱贫战123</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td rowspan="3">打好攻坚脱贫战123</td>
<td>远程教学</td>
<td colspan="2" rowspan="3" align="center">休息</td>
<td>1教室</td>
</tr>
<tr>
<td>中青一班</td>
<td>打好攻坚脱贫战</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td>远程教学</td>
<td>1教室</td>
</tr>
<tr>
<td>中青一班</td>
<td>打好攻坚脱贫战</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td>远程教学</td>
<td>打好攻坚脱贫战</td>
<td>远程教学</td>
<td>1教室</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css 实现 table斜线表头
最新推荐文章于 2023-08-21 10:48:12 发布