怎样实现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>相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上是怎样实现table表格中的斜线表头效果 的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
PPT表格中插入的图片调整格式的操作步骤
Mar 26, 2024 pm 04:16 PM
1、新建一个PPT文件，命名为【PPT技巧】，作为示例。2、双击【PPT技巧】，打开PPT文件。3、插入两行两列的表格，作为示例。4、在表格的边框上双击，上方工具栏出现【设计】的选项。5、点击【底纹】的选项，点击【图片】。6、点击【图片】，弹出以图片为背景的填充选项对话框。7、在目录中找到要插入的托，点击确定即可插入图片。8、在表格框上右击，弹出设置的对话框。9、点击【设置单元格格式】，勾选【将图片平铺为底纹】。10、设置【居中】【镜像】等自己需要的功能，点击确定即可。注意：默认为图片填充在表格
关于销量预测如何制作表格
Mar 20, 2024 pm 03:06 PM
能够熟练的制作表格不仅是会计、人事以及财务的必备技能，对于很多销售人员来说，学会制作表格也是很重要的。因为与销量有关的数据都是很多并且很复杂的，而且不是简单的记在文档当中，就可以说明问题的。为了能够让更多的销售人员熟练运用Excel来制作表格，小编接下来要介绍的就是有关于销量预测的表格制作问题，有需要的朋友不要错过哦！1，打开【销量预测及目标制定】，xlsm，来分析每个表格所存放的数据。2，新建【空白工作表】，选择【单元格】，输入【标签信息】。向下【拖拽】，【填充】月份。输入【其它】数据，点击【
wps数值怎样设置按条件自动变色_wps表格数值设置按条件自动变色的步骤
Mar 27, 2024 pm 07:30 PM
1、打开工作表，找到【开始】-【条件格式】按钮。2、点击列选择，选中将添加条件格式的列。3、单击【条件格式】按钮，弹出选项菜单国。4、选择【突出显示条件规则】-【介于】。5、填写规则：20，24，深填充色深绿色文本。6、确定后，所选列中数据按照设定对相应数字文字、单元框加色处理。7、对于没有冲突的条件规则，可以重复添加，但对于冲突规则wps则会以最后添加的规则代替之前建立的条件规则。8、重复添加【介于】规则20-24和【小于】20后的单元列。9、如需改变规则，刚可以清除规则后重新设定规则。
如何使用 JavaScript 实现表格列宽拖拽调整功能？
Oct 21, 2023 am 08:14 AM
如何使用JavaScript实现表格列宽拖拽调整功能？随着Web技术的发展，越来越多的数据以表格的形式展示在网页上。然而，有时候表格的列宽并不能满足我们的需求，可能会出现内容溢出或者宽度不足的情况。为了解决这个问题，我们可以使用JavaScript实现表格的列宽拖拽调整功能，使用户可以根据需求自由调整列宽。实现表格列宽拖拽调整功能，需要以下三个主
表格有一条虚线外打印不到怎么办
Mar 28, 2023 am 11:38 AM
表格有一条虚线外打印不到的解决办法：1、打开excel文件，在打开的页面中点击“打印”；2、在预览页找到“无缩放”，选择调整为一页；3、选择打印机打印文档即可。
css怎么去掉表格重复的边框
Sep 29, 2021 pm 06:05 PM
在css中，可以使用border-collapse属性来去掉表格中重复的边框，该属性可以设置表格边框是折叠为单一边框还是分开的，只需要将值设置为collapse即可把重叠的边框合并在一起，成为一个边框，实现单线边框的效果。
Vue中如何实现表格数据的导出和导入
Oct 15, 2023 am 08:30 AM
Vue中如何实现表格数据的导出和导入，需要具体代码示例在使用Vue开发的Web项目中，经常会遇到需要将表格数据导出为Excel或导入Excel文件的需求。本文将介绍如何使用Vue来实现表格数据的导出和导入功能，并提供具体的代码示例。一、表格数据的导出安装依赖首先，我们需要安装一些依赖，用于导出Excel文件。在Vue项目中的命令行中运行以下命令：npmin
你知道Word表格怎么求和吗
Mar 21, 2024 pm 01:10 PM
有时候，我们在Word表格中会经常遇到计数的问题；一般遇到这样的问题，大部分同学都回把Word表格复制到Excel中来计算；还有一部分同学会默默地拿起计算器去算。那有没有快速的方法来计算呢？当然有啊，其实在Word中也是可以计算求和的。那么，你知道该怎么操作吗？今天，我们就来一起来看一下吧！废话不多说，有需要的小伙伴赶紧收藏起来吧！步骤详情：1、首先，我们打开电脑上的Word软件，打开需要处理的文档。（如图所示）2、接着，我们将光标定位在求和数值所在的单元格上（如图所示）；然后，我们点击【菜单栏
