5种做法实现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>
好了，五种方法都说完了，希望可以对大家有所帮助
5种做法实现table表格中的斜线表头效果的更多相关文章
- 在table表格中实现圆角效果
在table中设置border-radius发现不起作用,网上查找了一番,原因是border-collapse:collapse和border-radius不兼容. 设计图效果 代码实现效果: < ...
- table表格整体居中 和 table表格中各行各列内容居中
1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- table表格中的内容溢出布局方式
什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...
- table表格中实现tbody部分可滚动，且thead部分固定
1.想要实现表格的thead部分固定切tbody部分可滚动,就需要将thead与tbody进行分离,具体做法是 1.设置thead,tbody都为display:block: 2.设置th与td的宽度 ...
- table表格中加入<a>标签，使内容上下居中的方法。
主要思路:定义好表格单元格的width和height,再加入<a>后,设置<a>的width=100%,height=100%填充整个单元格.那么此时设置上下左右居中样式就只需 ...
- 在把table表格中的数据导出到Excel的时候，以科学计数法显示位数多的数字时怎么解决？
sbHtml.AppendFormat("<td> {0}</td>", data[i].IDcard.ToString()); sbHtml.Append ...
- table表格中文字超出显示省略号
第一步: table {table-layout:fixed:}列宽由表格宽度和列宽度设定,不随文字多少变化 第二步: td { white-space:nowrap;/*文本不会换行,文本会在在同一 ...
- vue+element-ui：table表格中的slot 、formatter属性
slot 插槽,table中表示该行内容以自定义方式展示 :formatter 方法,用来格式化内容 Function(row, column, cellValue, index) html < ...
随机推荐
- linux下主机用户管理（完整详情）
(一) 创建新用户 useradd命令(也可以使用adduser)用来创建新的用户帐号,其命令格式如下: 表4-19 useradd命令常用选项 常用现象意 义 -d设置新用户的登陆目录 -e设置新用 ...
- 29.Django session
session 1.概述 cookie和session的区别 Cookie是保存在用户浏览器端的键值对,Session是保存在服务器端的键值对:Cookie做用户验证的时,敏感信息不适合放在Cooki ...
- CentOS 远程桌面相关服务安装笔记
# CentOS 7安装图形界面 sudo yum groupinstall "GNOME Desktop" "Graphical Administration Tool ...
- python中字符串和列表只是汇总
字符串知识汇总 字符串是描述变量的重要信息,其中的应用也是很多,很重要的一点就是StringBuilder.今天我们会为大家介绍一下常用的StringBuilder 1 strip lstrip rs ...
- 搭建一套完整的Mysql5.7innodbcluster(GroupReplication+mysqlrouter)
先说三个大步骤: 搭Mysql5.7 Group Replication ,配置成单主模式 安装Mysqlshell,配innodbcluster 安装Mysql-router 第一步:搭Mysql5 ...
- 二分查找的变种(Java实现)
普通二分查找: 先回顾一下普通的二分查找 注意:二分查找有这样一个问题:当数组中数有重复时,比如 {3,3,3,3} 这个数组,二分查找3时,返回的是arr[1],也就是说二分查找并不会返回3第一次出 ...
- window平台写的shell脚步在Linux不识别
---恢复内容开始--- 出现的问题是 写的shell脚步在Linux执行的时候不被识别 解决方案: 1.确保用户对文件有读写及执行权限 oracle@linux-106:~/RMAN/bin> ...
- Jenkins集成Docker镜像实现自动发布
1. 思路&流程 Jenkins集成Docker镜像实现自动发布与Jenkins发布mavne项目思路一样总体流程 为:Jenkins 拉去远端源码 -- gitl实现应用打包 -- jenk ...
- STL --> 高效使用STL
高效使用STL 仅仅是个选择的问题,都是STL,可能写出来的效率相差几倍: 熟悉以下条款,高效的使用STL: 一.当对象很大时,建立指针的容器而不是对象的容器 1)STL基于拷贝的方式的来工作,任 ...
- 云计算 --> 技术原理
云计算技术原理 云计算分为IaaS.PaaS和SaaS三种类型,不同的厂家又提供了不同的解决方案,目前还没有一个统一的技术体系结构,下图是一个供商榷的云计算体系结构如下,它概括了不同解决方案的主要特征 ...