鲨鱼网
调用DIV CSS实现模拟表格对角线
创始人
2024-07-13 06:30:33
0次

本文和大家重点讨论一下如何使用DIV+CSS模拟表格对角线，用边框线来摸拟斜线，我们知道，如果将一个DIV的边框线设置得足够宽并定义了不同的颜色时，其相邻的两条边框线交界处就是斜线。

用DIV+CSS模拟表格对角线

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

原理：

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

我们先创建一个结构：

  1.  
  2. 类别 
  3. 姓名 
 
  •  

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

    1. .out{  
    2. border-top:40px#D6D3D6solid;/*上边框宽度等于表格***行行高*/  
    3. width:0px;/*让容器宽度为0*/  
    4. height:0px;/*让容器高度为0*/  
    5. border-left:80px#BDBABDsolid;/*左边框宽度等于表格***行***格宽度*/  
    6. position:relative;/*让里面的两个子容器绝对定位*/  
    7. }  

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

    1. b{font-style:normal;display:block;  
    2. position:absolute;top:-40px;left:-40px;width:35px;}  
    3. em{font-style:normal;display:block;  
    4. position:absolute;top:-25px;left:-70px;width:55x;}  

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

    这种对角线模拟法也有缺点：

    ◆宽高度必须是已知的

    ◆宽高的长度不能差得太大，你可以试试将宽度拉得比高度长好几倍，看看效果。

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

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

    完整的代码：

    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3.  
    4.  
    5.  
    6. 用div+css模拟表格对角线 
    7.  
    8. *{padding:0;margin:0;}  
    9. caption{font-size:14px;font-weight:bold;}  
    10. table{border-collapse:collapse;border:1px#525152solid;  
    11. width:50%;margin:0auto;margin-top:100px;}  
    12. th,td{border:1px#525152solid;text-align:center;  
    13. font-size:12px;line-height:30px;background:#C6C7C6;}  
    14. th{background:#D6D3D6;}  
    15. /*模拟对角线*/  
    16. .out{  
    17. border-top:40px#D6D3D6solid;/*上边框宽度等于表格***行行高*/  
    18. width:0px;/*让容器宽度为0*/  
    19. height:0px;/*让容器高度为0*/  
    20. border-left:80px#BDBABDsolid;/*左边框宽度等于表格***行***格宽度*/  
    21. position:relative;/*让里面的两个子容器绝对定位*/  
    22. }  
    23. b{font-style:normal;display:block;position:absolute;  
    24. top:-40px;left:-40px;width:35px;}  
    25. em{font-style:normal;display:block;position:absolute;  
    26. top:-25px;left:-70px;width:55x;}  
    27. .t1{background:#BDBABD;}  
    28.  
    29.  
    30.  
    31.  
    32.  
    33.  
    34.  
    35.  
    36. 类别 
    37. 姓名 
    38.  
    39.  
    40.  
    41.  
    42.  
    43.  
    44.  
    45.  
    46. 张三 
    47.  
    48.  
    49.  
    50.  
    51.  
    52.  
    53. 李四 
    54.  
    55.  
    56.  
    57.  
    58.  
    59.  
    60. 王五 
    61.  
    62.  
    63.  
    64.  
    65.  
    66.  
    67. 赵六 
    68.  
    69.  
    70.  
    71.  
    72.  
    73. 用div+css模拟表格对角线
      年级班级成绩班级均分
      三26261
      三14867
      三57963
      三48966
       
    74.  
    75.  
    76.  

    【编辑推荐】

    1. DIV滚动条属性及样式设置方式
    2. JavaScript动态创建div属性和样式
    3. SPAN元素和DIV元素的区别
    4. CSS2.0中page-break-after属性用法
    5. 探究CSS中border:none;与border:0;的区别

     

     

    上一篇：浅谈Zigbee协议栈的加密算法

    下一篇：无线网络故障的四大解决方案

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
    规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点，每一个服务点的员工都通过宽带路由器进行共享上网，和单位网络保持联...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    范例解读VB.NET获取环境变... VB.NET编程语言的使用范围非常广泛，可以帮助开发人员处理各种程序中的需求，而且还能对移动设备进行...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站，直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...