首先声明：

这只是探讨一种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. Java反射机制demo（四）—获取一个类的父类和实现的接口

    Java反射机制demo(四)—获取一个类的父类和实现的接口 1,Java反射机制得到一个类的父类 使用Class类中的getSuperClass()方法能够得到一个类的父类 如果此 Class 表示 ...

  2. To 初识Java的小菜菜们 嘻嘻~

    一.Java Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言.Java 技术具有卓越的通用性.高效性.平台移植性和安全性,广泛应用于PC.数据中心.游戏控制台.科学超级计算机.移动电话和 ...

  3. Revit二次开发示例：DeleteDimensions

    在本例中,创建一个命令,实现删除所选中的尺寸标注. #region Namespaces using System; using System.Collections.Generic; using S ...

  4. Linux内核代码

    全局描述符表GDT(Global Descriptor Table): (1)在整个系统中,全局描述符表(注意这里是表,表只有一张)GDT只有一张(一个处理器对应一个GDT). (2)GDT可以被放在 ...

  5. [POI2015]Trzy wieże

    [POI2015]Trzy wieże 题目大意: 给定一个长度为\(n(n\le10^6)\)的仅包含'B'.'C'.'S'三种字符的字符串,请找到最长的一段连续子串,使得在这一段内出现过的所有字符 ...

  6. 【失踪人口回归】第11届东北地区大学生程序设计竞赛——Time to make some change

    对哈尔滨出租车和纸质题目和2148473647的吐槽都被毕克神牛在知乎上(https://www.zhihu.com/question/59782275/answer/169402588)pick/b ...

  7. CSS实现背景透明，文字不透明

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. MVC基类控制器的会话丢失重新登录权限过滤

    SSOController.cs请查看以下代码: public class SSOController : Controller { public const string Token = " ...

  9. JavaScript Promises

    上篇文章介绍了JavaScript异步机制,请看这里. JavaScript异步机制带来的问题 JavaScript异步机制的主要目的是处理非阻塞,在交互的过程中,会需要一些IO操作(比如Ajax请求 ...

  10. rpm管理环境包和代码包

    Author: JinDate: 20140610System: CentOS release 6.5 (Final) 06-09-2014c零:问题配置文件问题,不打包使用的配置文件参考配置文件后缀 ...