三沣开发知识 购物 网址 游戏 小说 歌词 地图 快照 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 开发 租车 短信 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> CSS/HTML/Xhtml -> 5种做法实现table表格中的斜线表头效果 -> 正文阅读
 

[CSS/HTML/Xhtml]5种做法实现table表格中的斜线表头效果

5种做法实现table表格中的斜线表头效果 table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢?
table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢?
我总结了以下几种方法:
1、最最最简单的做法
直接去找公司的UI,让她做一张图片,作为背景图片放到这里,然后撑满就可以了。是不是很简单!!!
2、相当简单的做法
其实了解css3的朋友,一看到这个效果,脑子中瞬间出现的就是transform这个属性,是的,这个确实可以,也很简单,就是有一个问题要注意浏览器的兼容性问题,大家心里要要时刻保持着危机意识(IE还存在呢),如果你们公司的要求是只兼容chrome,那么,这个方法很适合你。
3、十分简单的做法

.biaoTou {
                border-top: 200px #199fff solid; /*上边框宽度等于表格第一行行高*/  
                border-left: 200px #ff8838 solid; /*左边框宽度等于表格第一行第一格宽度*/  
            }

<td width="200">
    <div class="biaoTou">
                        
    </div>
</td>

这种方法也很简单,按照上面的格式写下来就好了。但是这种写法有个明显的问题:这种其实就是利用两种颜色的不同的border划分表头的斜线的,斜线两边的颜色不能相同,如果是做一些促销活动之类的表格时可以用这种方法。但是如果我们需要斜线两边的颜色一样时,这种做法是不适用的。慎用。
4、很简单的做法
这种效果其实还可以用css3的另一个新的标签canvas。将其作为画布画一条斜线是一种十分简单的做法,就不详细解释了,但是也有一个问题,就是老生常谈的兼容性问题了,如果只是兼容chrome,你想怎么办都行(为什么我们公司一直要考虑可恶的IE,我也想只做兼容谷歌的项目啊)。
5、不简单的做法
那就是js做法了

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<HTML>  
<HEAD>  
<TITLE>斜线表头</TITLE>  
<meta http-equiv="content-type" content="charset=gbk">  
</HEAD>  
  
<body leftmargin=0 topmargin=0>  
    <br>  
    <div height="300">header</div>  
    <hr>  
    <TABLE border=0 bgcolor="000000" cellspacing="1" width=400  
        style="margin-left: 100px;">  
        <TR bgcolor="FFFFFF">  
            <TD width="111" height="52"><table width="100%" height="100%"  
                    border="0" cellpadding="0" cellspacing="0">  
                    <tr>  
                        <td id="td1"></td>  
                        <td>成绩</td>  
                    </tr>  
                    <tr>  
                        <td>姓名</td>  
                        <td id="td2"></td>  
                    </tr>  
                </table></TD>  
            <TD width="81">数学</TD>  
            <TD width="96">英语</TD>  
            <TD width="99">C语言</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>张三</TD>  
            <TD>55</TD>  
            <TD>66</TD>  
            <TD>77</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>李四</TD>  
            <TD>99</TD>  
            <TD>68</TD>  
            <TD>71</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>王五</TD>  
            <TD>33</TD>  
            <TD>44</TD>  
            <TD>55</TD>  
        </TR>  
    </TABLE>  
    <script type="text/javascript">  
        function a(x, y, color) {  
            document  
                    .write("<img   border='0'   style='position:   absolute;   left:   "  
                            + (x)  
                            + ";   top:   "  
                            + (y)  
                            + ";background-color:   "  
                            + color  
                            + "'   src='px.gif'   width=1   height=1>")  
        }  
        function getTop(tdobj) {  
            vParent = tdobj.offsetParent;  
            t = tdobj.offsetTop;  
            while (vParent.tagName.toUpperCase() != "BODY") {  
                t += vParent.offsetTop;  
                vParentvParent = vParent.offsetParent;  
            }  
            return t;  
        }  
  
        function getLeft(tdobj) {  
            vParent = tdobj.offsetParent;  
            t = tdobj.offsetLeft;  
            while (vParent.tagName.toUpperCase() != "BODY") {  
                t += vParent.offsetLeft;  
                vParentvParent = vParent.offsetParent;  
            }  
            return t;  
        }  
        function line(x1, y1, x2, y2, color) {  
            var tmp  
            if (x1 >= x2) {  
                tmp = x1;  
                x1 = x2;  
                x2 = tmp;  
                tmp = y1;  
                y1 = y2;  
                y2 = tmp;  
            }  
            for ( var i = x1; i <= x2; i++) {  
                x = i;  
                y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;  
                a(x, y, color);  
            }  
        }  
        //line(1,1,100,100,"000000");   
        line(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,  
                getTop(td1) + td1.offsetHeight, '#000000');  
        line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,  
                getTop(td2) + td2.offsetHeight, '#000000');  
    </script>  
</BODY>  
</HTML> 

好了,五种方法都说完了,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
  CSS/HTML/Xhtml 最新文章
关于html的表单元素详解(二)
关于html的表单元素详解(一)
网页加载进度条详解(推荐)
HTML写一个网页动态时钟
html转换为pdf案例的一些总结(多图推荐)
HTML网页中插入视频的方法小结
HTML表格标记教程(3):宽度和高度属性WIDTH、
HTML标记语言——表单
Html注释 Html中标记文字注释的符号
htnl基础知识之网页页面的初步了解
上一篇文章      下一篇文章      查看所有文章
加:2017-08-16 23:21:33  更:2017-08-16 23:21:48 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2017年10日历
2017-10-22 7:14:33
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库