如何用html代码做表格里的对角线,如何用用div+css模拟表格对角线

2024-06-06 04:28:29

首先声明：

这只是探讨一种CSS模拟表格对角线的用法，实际在工作中可能觉得这样做有点小题大作，这不是本主题讨论的重点。如果对此深以为然的朋友，请一笑过之。。。

有时在插入文档时，要用到表格对角线，常见的作法是用图片的方式来处理，还有就是用vml来画对角线，能不能用html+css方式来实现呢？答案是肯定的，下面我们来摸拟一个表格对角线。

原理：

用边框线来摸拟斜线，我们知道，如果将一个DIV的边框线设置得足够宽并定义了不同的颜色时，其相邻的两条边框线交界处就是斜线。知道了这个原理，我们就可以用border-left和border-top来模拟出斜线的效果。

我们先创建一个结构：

类别

姓名

我们用

作为对角线的容器，我们来设置斜线样式，关键代码如下：

.out{

border-top:40px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/

width:0px;/*让容器宽度为0*/

height:0px;/*让容器高度为0*/

border-left:80px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/

position:relative;/*让里面的两个子容器绝对定位*/

}

和两个标签来设置两个分类，分别将它们设置为块状结构display:block;清除其默认的字体样式font-style:normal；因其父容器设置了相对定位，所以设置其为绝对定位，这样可以将它偏移到你想指定的位置了。

b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}

em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}

这样一个斜线对角线就模拟出来了。知道了原理，你可以变成很多有趣的东西出来，祝你好运！

这种对角线模拟法也有缺点：宽高度必须是已知的

宽高的长度不能差得太大，你可以试试将宽度拉得比高度长好几倍，看看效果。(给你们留点作业练习练习)

还有就是斜线条不能设置颜色。

另：以上代码只测试了ie6和ff3，其它浏览器未做测试，请朋友们测试一下。

下面是完整的代码：

用div+css模拟表格对角线

*{padding:0;margin:0;}

caption{font-size:14px;font-weight:bold;}

table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;}

th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;}

th{background:#D6D3D6;}

/*模拟对角线*/

.out{

border-top:40px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/

width:0px;/*让容器宽度为0*/

height:0px;/*让容器高度为0*/

border-left:80px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/

position:relative;/*让里面的两个子容器绝对定位*/

}

b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}

em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}

.t1{background:#BDBABD;}

用div+css模拟表格对角线
类别姓名	年级	班级	成绩	班级均分
张三	三	2	62	61
李四	三	1	48	67
王五	三	5	79	63
赵六	三	4	89	66

如何用html代码做表格里的对角线,如何用用div+css模拟表格对角线相关推荐

html th中加斜杠,css 模拟表格斜线
用div+css模拟表格对角线用div+css模拟表格对角线类别姓名年级班级成绩班级均分张三三 2 62 61 李四三 1 48 67 王五三 5 79 63 赵六三 4 89 ...
div做表格 html5,div+css制作表格
本章给大家介绍如何用div+css制作表格,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. html: 花名册: 序号姓名年龄 footer footer footer 1 Jo ...
html5对代码自动排版,HTML5系列：通过JS+DIV+CSS排版布局实现选项卡效果
CSS介绍及布局特点层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现 ...
css表格表头对角线,用div+css模拟类excel表格对角线（斜线）
我们先看html代码吧用div+css模拟类excel表格对角线(斜线) 科目姓名数学语文张三 92 62 李四 91 67 第一种写法 css如下 * { padding: 0; marg ...
计算机怎么查找表格里内容,请教如何迅速查找复杂EXCEL表格里的内容？ -电脑资料...
个人手头上有个复杂的EXCEL报名表格,写有项报名资格的条件, 例如:职位名称用人单位职位代码职位简介招考人数专业 ..... 我想从中筛选出哪些符合我的条件的项目来,该如何做呢? 记得EX ...
怎么在html表格里加入图片不显示不出来,WPS表格里插入的嵌入式图片在Office的Excel无法正常显示...
WPS表格里插入的嵌入式图片是=DISPIMG格式,这个图片是wps特有的功能,它不是shape, 有shapes集合中找不到.只能用wps的et表格打开才能看到这个图片在Excel中打开会显示为 ...
点击弹窗 input直接是待输入状态_第六课：你知道如何用两行代码做个弹窗吗？看这里...
两行代码写出一个广告弹窗首先在这节课开始之前,我们要回顾一下第一堂课的一个小知识点-----库. 库我们之前说过,库是什么?什么是库?我们可以将库理解为仓库,仓库里面有很多工具,比如说扳手或者是钳 ...
第六课：你知道如何用两行代码做个弹窗吗？看这里！两行代码写出一个广告弹窗
首先在这节课开始之前,我们要回顾一下第一堂课的一个小知识点-----库. 库我们之前说过,库是什么?什么是库?我们可以将库理解为仓库,仓库里面有很多工具,比如说扳手或者是钳子什么的. 标准库仓库之 ...
计算机表格里的隐藏怎么弄出来怎么办,电脑表格隐藏不见了怎么办
1.EXCEL表中怎么会隐藏了很多行,而且隐藏的行数都不见了,怎么弄工具:华硕电脑原料:Excel 1.首先打开excel软件,同时选中显示的第一列和列序列部分,如下图所示. 2.然后点击鼠标右键 ...
div+css普通表格样式
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

最新文章

热门文章