码迷,mamicode.com
首页 > Web开发 > 详细

html table表格斜线表头的实现方法总汇

时间:2020-06-07 16:35:52      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:英语   有一个   了解   图片   etl   标签   height   是的   边框   

在html中给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢?总结了以下几种方法:

 

1、UI背景图实现

直接去找公司的UI,让她做一张图片,作为背景图片放到这里,然后撑满就可以了。是不是很简单!!!

 

2、 css3中transform属性

其实了解css3的朋友,一看到这个效果,脑子中瞬间出现的就是transform这个属性,是的,这个确实可以,也很简单,就是有一个问题要注意浏览器的兼容性问题,大家心里要要时刻保持着危机意识(IE还存在呢),如果你们公司的要求是只兼容chrome,那么,这个方法很适合你。

 

3、利用border-top和border-left

这种方法也很简单,但是这种写法有个明显的问题:这种其实就是利用两种颜色的不同的border划分表头的斜线的,斜线两边的颜色不能相同,如果是做一些促销活动之类的表格时可以用这种方法。但是如果我们需要斜线两边的颜色一样时,这种做法是不适用的。

css:

 1 table {  
 2     border-collapse: collapse;  
 3     border: 1px #eee solid;  
 4     width: 80%;  
 5     min-width: 300px;
 6     margin: 0 auto;    
 7 }  
 8 th{  
 9     border: 1px solid #ddd;  
10     text-align: center;  
11     height: 100px;
12 }  
13 .th_head{/*宽高100px,100px*/
14     width:200px;
15     position: relative; 
16 }  
17 .box{  
18     border-top: 100px #ff0 solid;  /*上边框宽度等于表格第一行行高*/  
19     border-left: 200px #0ff solid;  /*左边框宽度等于表格第一行第一格宽度*/  
20 }  
21 .a,.b{
22     font-style: normal;  
23     display: block;  
24     position: absolute;  
25     width: 200px;
26     height: 50px;
27     line-height: 50px;
28 }
29 .a{
30     top: 0px;  left: 0px;   
31 }  
32 .b{   
33     top: 50px;  left: 0px;     
34 }  
35 </style>
36 html:
37 
38 <table>  
39     <tr>  
40         <th class="th_head">  
41             <div class="box">  
42                 <em class="a">A</em>
43                 <em class="b">B</em>  
44             </div>  
45         </th>  
46         <th>C</th>    
47     </tr>   
48 </table>

设计坞https://www.wode007.com/sites/73738.html

 

4、css3的canvas

这种效果其实还可以用css3的另一个新的标签canvas。将其作为画布画一条斜线是一种十分简单的做法,就不详细解释了,但是也有一个问题,就是老生常谈的兼容性问题了,如果只是兼容chrome,你想怎么办都行(为什么我们公司一直要考虑可恶的IE,我也想只做兼容谷歌的项目啊)。

 

5、js的实现

 1 <TABLE border=0 bgcolor="000000" cellspacing="1" width=400  
 2         style="margin-left: 100px;">  
 3         <TR bgcolor="FFFFFF">  
 4             <TD width="111" height="52"><table width="100%" height="100%"  
 5                     border="0" cellpadding="0" cellspacing="0">  
 6                     <tr>  
 7                         <td id="td1"></td>  
 8                         <td>成绩</td>  
 9                     </tr>  
10                     <tr>  
11                         <td>姓名</td>  
12                         <td id="td2"></td>  
13                     </tr>  
14                 </table></TD>  
15             <TD width="81">数学</TD>  
16             <TD width="96">英语</TD>  
17             <TD width="99">C语言</TD>  
18         </TR>  
19         <TR bgcolor="FFFFFF">  
20             <TD>张三</TD>  
21             <TD>55</TD>  
22             <TD>66</TD>  
23             <TD>77</TD>  
24         </TR>  
25         <TR bgcolor="FFFFFF">  
26             <TD>李四</TD>  
27             <TD>99</TD>  
28             <TD>68</TD>  
29             <TD>71</TD>  
30         </TR>  
31         <TR bgcolor="FFFFFF">  
32             <TD>王五</TD>  
33             <TD>33</TD>  
34             <TD>44</TD>  
35             <TD>55</TD>  
36         </TR>  
37     </TABLE>  
38     <script type="text/javascript">  
39         function a(x, y, color) {  
40             document  
41                     .write("<img   border=‘0‘   style=‘position:   absolute;   left:   "  
42                             + (x)  
43                             + ";   top:   "  
44                             + (y)  
45                             + "; color: rgb(0, 136, 0);">"‘   src=‘px.gif‘   width=1   height=1>")  
46         }  
47         function getTop(tdobj) {  
48             vParent = tdobj.offsetParent;  
49             t = tdobj.offsetTop;  
50             while (vParent.tagName.toUpperCase() != "BODY") {  
51                 t += vParent.offsetTop;  
52                 vParentvParent = vParent.offsetParent;  
53             }  
54             return t;  
55         }  
56   
57         function getLeft(tdobj) {  
58             vParent = tdobj.offsetParent;  
59             t = tdobj.offsetLeft;  
60             while (vParent.tagName.toUpperCase() != "BODY") {  
61                 t += vParent.offsetLeft;  
62                 vParentvParent = vParent.offsetParent;  
63             }  
64             return t;  
65         }  
66         function line(x1, y1, x2, y2, color) {  
67             var tmp  
68             if (x1 >= x2) {  
69                 tmp = x1;  
70                 x1 = x2;  
71                 x2 = tmp;  
72                 tmp = y1;  
73                 y1 = y2;  
74                 y2 = tmp;  
75             }  
76             for ( var i = x1; i <= x2; i++) {  
77                 x = i;  
78                 y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;  
79                 a(x, y, color);  
80             }  
81         }  
82         //line(1,1,100,100,"000000");   
83         line(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,  
84                 getTop(td1) + td1.offsetHeight, #000000);  
85         line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,  
86                 getTop(td2) + td2.offsetHeight, #000000);  
87     </script>

 

html table表格斜线表头的实现方法总汇

标签:英语   有一个   了解   图片   etl   标签   height   是的   边框   

原文地址:https://www.cnblogs.com/ypppt/p/13060845.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!