首先声明：

这只是探讨一种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/IE7/8/9和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>

巧妙使用div+css模拟表格对角线的更多相关文章

  1. 问题：table 可否实现对角线；结果：用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做表格去掉外围边框

    通过div做表格时想加上边框,并且想取点外围边框: <div class="cont"> <div class="row"> <a ...

  7. 浅谈分析表格布局与Div+CSS布局的区别

    (1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表 ...

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

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

  9. 谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. Python面向对象中super用法与MRO机制

    1. 引言 最近在研究django rest_framework的源码,老是遇到super,搞得一团蒙,多番查看各路大神博客,总算明白了一点,今天做一点总结. 2. 为什么要用super 1)让代码维 ...

  2. [漏洞复现] CVE-2017-11882 通杀所有Office版本

    此漏洞是由Office软件里面的 [公式编辑器] 造成的,由于编辑器进程没有对名称长度进行校验,导致缓冲区溢出,攻击者通过构造特殊的字符,可以实现任意代码执行. 举个例子,如果黑客利用这个漏洞,构造带 ...

  3. 【转】JQuery Validate使用总结1

    一.导入js库 <script src="../js/jquery.js" type="text/javascript"></script&g ...

  4. [leetcode DP]63. Unique Paths II

    Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...

  5. 安装部署VMware vSphere 5.5文档 (6-6) 集群和vMotion

    部署VMware vSphere 5.5 实施文档 ########################################################################## ...

  6. python orm字段解析

    null # 是否可以为空 default # 默认值 primary_key # 主键 db_column # 列名 db_index # 索引(db_index=True) unique # 唯一 ...

  7. Java设计模式GOF之6大设计原则

    Java设计模式GOF之6大设计原则原则 1.开闭原则(Open Close Principle) 一个软件实体如类.模块和函数应该对扩展开放,对修改关闭. 开闭原则是面向对象的可复用设计的第一块基石 ...

  8. 【二分】【动态规划】Gym - 101156E - Longest Increasing Subsequences

    求最长上升子序列方案数. 转载自:http://blog.csdn.net/u013445530/article/details/47958617,如造成不便,请博主联系我. 数组A包含N个整数(可能 ...

  9. SB!SB!SB! ----WriteUp

    原题 下载图片 http://ctf5.shiyanbar.com/stega/ste.png 用Stegsolve查看 发现有个二维码 扫码可以知道flag

  10. PHP 操作MySQL时mysql_connect( )和Mysqli( )的两种报错机制

    刚开始使用PHP连接MySQL数据库的时候,如果数据库连接不成功或者,对MySQL数据库进行增删改查等操作的时候,SQL语句存在错误,而在执行PHP文件的时候,浏览器并不会抛出错误的原因,一般是空白显 ...