- it技术
- css 实现 table斜线表头
<!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
>
