CSS模拟表格斜线
原理利用div+css模拟表格的对角线，容器相邻边的border宽度大于1时，且相邻边框颜色不一样，会形成一个斜线，具体代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><style type="text/css">.div {border-left: #023060 20px solid;border-right: #366AA1 20px solid;border-top: #0F2E4E 20px solid;border-bottom: #548CC7 20px solid;width: 120px;margin: 0px auto;text-align: center;font-size: 12px;line-height: 22px;color: #bbdcff;background-color: #194D83;}</style><title>运用css模拟表格</title></head><body><div class="div">测试内容</div></body></html>
案例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">* {padding: 0;margin: 0;}caption {font-size: 14px;font-weight: bold;}table {border-collapse: collapse;border: 1px #525152 solid;width: 50%;margin: 0 auto;margin-top: 100px;}th,td {border: 1px #525152 solid;text-align: center;font-size: 12px;line-height: 30px;background: #C6C7C6;}th {background: #D6D3D6;}/*模拟对角线*/.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: 35px;}em {font-style: normal;display: block;position: absolute;top: -25px;left: -70px;width: 55x;}.t1 {background: #BDBABD;}</style></head><body><table><caption>用div+css模拟表格对角线</caption><tr><th style="width:80px;"><div class="out"> <b>类别</b> <em>姓名</em> </div></th><th>年级</th><th>班级</th><th>成绩</th><th>班级均分</th></tr><tr><td class="t1">张三</td><td>三</td><td>2</td><td>62</td><td>61</td></tr><tr><td class="t1">李四</td><td>三</td><td>1</td><td>48</td><td>67</td></tr><tr><td class="t1">王五</td><td>三</td><td>5</td><td>79</td><td>63</td></tr><tr><td class="t1">赵六</td><td>三</td><td>4</td><td>89</td><td>66</td></tr></table></body></html>
效果如下：
