首先声明：

这只是探讨一种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. 2017 Idea 最简易破解 （无需jar包）（个人整理）

    首先 修改host文件: 文件路径:C:\Windows\System32\drivers\etc\hosts 修改:将“0.0.0.0 account.jetbrains.com”追加到hosts文 ...

  2. APP的UI自动化测试框架及平台化探索

    顾铮,10年+测试及测试开发相关经验,2014年加入京东,曾主导设计开发UI测试框架,参与CI测试平台建设,现负责iOS侧的工具,框架建设.在UI自动化,性能测试,单元测试方面有较深入研究,在App, ...

  3. python issubclass 和 isinstance函数

    Python issubclass() 函数 issubclass() 方法用于判断参数 class 是否是类型参数 classinfo 的子类. 语法: issubclass(class, clas ...

  4. django数据库操作-增删改查-多对多关系以及一对多(外键)关系

    一.一对多(外键) 例子:一个作者对应多本书,一本书只有一个作者 model代码: class Person(models.Model); name = models.CharField('作者姓名' ...

  5. Centos7(Firewall)防火墙开启常见端口命令

    使用云服务器的,一定要注意开启安全组配置的响应端口 Centos7默认安装了firewalld,如果没有安装的话,则需要YUM命令安装:firewalld真的用不习惯,与之前的iptable防火墙区别 ...

  6. 【动态规划+Floyd】OpenJudge3368

    OpenJudge上刷水都不会了……这题居然写了一个半小时…… [题目大意] 诸葛亮要征服N城市.然而,City-X在击败City-2,City-3……City-x-1后击败.关羽,张飞,赵云,每个人 ...

  7. 20162325 金立清 S2 W11 C20

    20162325 2017-2018-2 <程序设计与数据结构>第11周学习总结 教材关键概念摘要 在哈希方法中,元素保存在哈希表中,其在表中的位置由哈希函数确定. 两个元素或关键字映射到 ...

  8. C/C++ 之输入输出

    因为C++向下兼容C,所以有多种输入输出的方式,cin/cout十分简洁,但个人觉得不如scanf/printf来的强大,而且在做算法题时,后者运行速度也快些. scanf/printf #inclu ...

  9. 升级Tornado到4后weibo oauth登录不了

    把 Tornado 升级到4后,发现正常运行的微博登录不可以了. 原因是4已经移除 RequestHandler.async_callback and WebSocketHandler.async_c ...

  10. ant design Modal遮罩层颜色加深 解决方案

    1.原因 页面中存在多个Modal同时渲染及弹出(在table里使用Modal就会出现这种问题) 2.解决方案 不让多个Modal同时渲染就行了,设置Modal的visible属性为this.stat ...