css表格表头对角线 |
您所在的位置：网站首页 › 经纬表格怎么画 › css表格表头对角线 |
css表格表头对角线
|
html table表格表头对角线 方案一: 在最近的需求中，有个表格表头里有斜线，我特意翻了 HTML5权威指南 的笔记，发现并没有介绍怎么画表头的斜线。找了下网上的实现，一般都是通过 css 来实现，使用 after 或者特定 span 画一条直线，然后通过 rotate 来旋转成斜线效果。这里涉及到怎么计算斜线角度，会用到一点点数学的知识  在线预览地址: 表格画斜线 | github 先来看两个数学公式 计算斜线的长度。勾股定理 a² + b² = c² /* 斜边边长 */
/* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */
/* Math.sqrt(Math.pow(150, 2) + Math.pow(80, 2)) = 170 */根据th单元格的宽高计算斜线的rotate角度。给定直角三角形的边长，怎么计算角度? 这里我们知道宽高，不知道斜边边长,假设角度A，正切tanA = 对边(高) / 邻边(宽)，我们知道这个角度A的正切值，怎么反向计算A的角度呢。就需要用到反正切函数 Math.atan了，他会返回一个弧度值。在JS中 180度对应的值为 Math.PI，计算出来的值乘以 (180 / Math.PI) 就是可以在css中使用的度数了，单位为 deg/* 角度计算公式 */
/* Math.atan(height / width) * 180 / Math.PI */
/* Math.atan(80 / 150) * 180 / Math.PI = 28.072486935852954 */完整代码如下 Document /* 基本表格元素 */ table { border-collapse: collapse; } th,td { border: 1px solid #666; padding: 5px; } /* th单元格 */ .slash-wrap { position: relative; box-sizing: border-box; width: 150px; height: 80px; } /* 斜线 */ .slash { position: absolute; display: block; top: 0; left: 0; /* 斜边边长 */ /* Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)) */ /* Math.sqrt(Math.pow(150, 2) + Math.pow(80, 2)) = 170 */ width: 170px; height: 1px; background-color:#000; /* 旋转角度计算公式 */ /* Math.atan(height / width) * 180 / Math.PI */ /* Math.atan(80 / 150) * 180 / Math.PI = 28.072486935852954 */ transform: rotate(28.072486935852954deg); transform-origin: top left; } /* 左下角文字 */ .left { position: absolute; /* 左下角 left:0; bottom: 0; */ left: 15px; bottom: 15px; } /* 右上角文字 */ .right { position: absolute; /* 右上角 right:0; top: 0; */ right: 15px; top: 15px; } 姓名 科目 语文 数学 张三 89 80 李四 89 80方案二: 发现这个模式需要用背景来做区分,可能有些设计场景无法使用. 
用div+css模拟表格对角线
* { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; border-left:1px solid #999; border-top:1px solid #999; font-size:13px; text-align:center; width:500px; margin:50px auto; }
td,th { border-right:1px solid #999; border-bottom:1px solid #999; padding:5px 0; background:#ddd; }
td { background:#F7F8F5; }
.mytablbox { width:100px; }
.mytable { width:0; height:0; margin:-5px 0; position:relative; border-top:50px solid #ddd; border-left:100px solid #F7F8F5; }
.mytable strong { display:block;position:absolute;top:-40px;left:-40px;width:35px; font-style:normal; }
.mytable em { position:absolute; left:-90px; top:-17px; display:block; width:30px; font-style:normal; }
类别
姓名
表格
表格
表格
表格
表格
表格
表格
表格
表格
表格
表格
|
【本文地址】