首先声明：

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

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

原理：

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

我们先创建一个结构：

<div class="out">
    <b>类别</b>
    <em>姓名</em>
  </div>

我们用<div class="out">作为对角线的容器，我们来设置斜线样式，关键代码如下：

.out{
   border-top:40px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/
   width:0px;/*让容器宽度为0*/
   height:0px;/*让容器高度为0*/
   border-left:80px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/      
  position:relative;/*让里面的两个子容器绝对定位*/
}

<b>和<em>两个标签来设置两个分类，分别将它们设置为块状结构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;}

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

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

  1. 宽高度必须是已知的
  2. 宽高的长度不能差得太大，你可以试试将宽度拉得比高度长好几倍，看看效果。（给你们留点作业练习练习）
  3. 还有就是斜线条不能设置颜色。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用div+css模拟表格对角线</title>
<style type="text/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;}
</style>
</head>
<body>
<table>
  <caption>用div+css模拟表格对角线</caption>
  <tr>
    <th style="width:80px;">
        <div class="out">
            <b>类别</b>
            <em>姓名</em>
        </div>
    </th>
    <th>年级</th>
    <th>班级</th>
    <th>成绩</th>
    <th>班级均分</th>
  </tr>
  <tr>
    <td class="t1">张三</td>
    <td>三</td>
    <td>2</td>
    <td>62</td>
    <td>61</td>
  </tr>
  <tr>
    <td class="t1">李四</td>
    <td>三</td>
    <td>1</td>
    <td>48</td>
    <td>67</td>
  </tr>
  <tr>
    <td class="t1">王五</td>
    <td>三</td>
    <td>5</td>
    <td>79</td>
    <td>63</td>
  </tr>
  <tr>
    <td class="t1">赵六</td>
    <td>三</td>
    <td>4</td>
    <td>89</td>
    <td>66</td>
  </tr>
</table>
</body>
</html>

问题：table 可否实现对角线；结果：用div+css模拟表格对角线的更多相关文章

  1. 巧妙使用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  2. div+css 制作表格

    <div class="table"> <h2 class="table-caption">花名册:</h2> <di ...

  3. div+css制作表格

    html: <div class="table"> <h2 class="table-caption">花名册:</h2> ...

  4. div+css模拟select下拉框

    <!DOCTYPE html><html ><head lang="zh"> <meta http-equiv="Content ...

  5. [转]DIV+CSS和TABLE的区别

    现在全国大大小小的网站都在搞一场技术“革命”,就是所谓“网站重构”说简单点就是DIV+CSS进行网站制作.用DIV+CSS代替传统的Table制作框架和美化页面.百度搜索优化 在重构之前,肯定要了解为 ...

  6. 初学者用div+css结构写网页的几个误区

    1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布 ...

  7. 3行3列表格 table实现，div+css实现

    table实现: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  8. div+css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

  9. 项目期复习总结2：Table， DIV+CSS，标签嵌套规则

    文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...

随机推荐

  1. Linux嵌入式 -- 内核 - 内存管理

    1.  逻辑地址 线性地址 物理地址 段式管理: 16位CPU,20根地址总线,可寻址1M内存,但是只有16位的寄存器,64K. 逻辑地址  =  段基地址 + 段内偏移地址 物理地址 PA  = 段 ...

  2. JMeter 3.0 POST Body Data 中文乱码问题

    现象如下图所示:

  3. 2017-02-20 注册.Net Framework4.0

    在使用IIS发布Web应用程序时,有时会遇到Asp.Net 4.0尚未在Web服务器上注册的问题,需要手动注册下.Net Framework 4.0. 注册.net Framwork4.0 步骤,以w ...

  4. 解决PasswordBox的Password非依赖属性，而无法绑定的问题，以及常规命令如何使用

    http://stackoverflow.com/questions/1483892/how-to-bind-to-a-passwordbox-in-mvvm

  5. hdu5692 dfs序线段树

    这是补的知识点,按先序遍历的顺序建立dfs序,用左右两个值代表整个区间,因为dfs序最重要的特点就是子树的区间是连续的 建立线段树时,需要用重新标过的 下标来建立 #pragma comment(li ...

  6. Multiprovide 实践理解

    “多重提供器”是一种“信息提供者”,它综合了多个“信息提供者”的数据以用于报告.“多重提供者”本身不包含任何数据.“多重提供者”的数据由所基于的“信息提供者”专门提供,这些“信息提供者”组合在一起进行 ...

  7. Kali 2.0 安装后的初始配置

    准备 1.VMware Workstation 2.kali-linux-2.0-amd64.iso 安装 手动安装 VMware 创建新的虚拟机,先不导入ISO文件,系统选择Debian 7.x 6 ...

  8. 分布式_理论_02_Base 理论

    一.前言 五.参考资料 1.分布式理论(二)——Base 理论 2.分布式理论(二) - BASE理论

  9. Gitblit的使用

    什么是 Gitblit Gitblit是一个开源的用于管理,查看和提供Git仓库. 它主要设计为希望托管集中存储库的小工作组的工具. Gitblit有什么特点 ... Gitblit部署示例1 日常维 ...

  10. 201621123014《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 答: 注1:关键词与内容不求多,但概念之间的联系 ...