首先声明：

这只是探讨一种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. CSU - 2061 Z‘s Coffee

    Description Z is crazy about coffee. One day he bought three cups of coffee. The first cup has a cap ...

  2. mysql正则表达式，实现多个字段匹配多个like模糊查询

    现在有这么一个需求 一个questions表,字段有题目(TestSubject),选项(AnswerA,AnswerB,AnswerC,AnswerD,AnswerE) 要求字段不包含png,jpg ...

  3. sublime text3安装Package Control和Vue Syntax Highlight

    一.下载Sublime3 https://www.sublimetext.com/3 二.安装Package Control 在线安装: https://packagecontrol.io/insta ...

  4. JIT即时编译器

    一.什么是JIT? 即时编译器,负责将IL转换成本机CPU指令 二.JIT编译原理 ①在Main方法执行之前,CLR会检测出Main的代码引用的所有类型.会导致CLR分配一个内部结构.在这个结构中,C ...

  5. requests https访问错误SSLError: certificate verify failed 及InsecureRequestWarning处理办法

    转自: https://blog.csdn.net/mighty13/article/details/78076258?locationNum=3&fps=1 在使用requests访问某网站 ...

  6. 冒泡排序之Java实现

    冒泡排序之Java实现 一.方法一 package cn.com.zfc.lesson21.sort; import java.util.Arrays; /** * * @title BubbleSo ...

  7. Mysql 千万级快速查询|分页方案

    1.简单的 直接查主键id SELECT id FROM tblist WHERE LIMIT 500000,10 2对于有where 条件,又想走索引用limit的,必须创建一个索引,将where  ...

  8. .NET面试宝典-高级(一)

    1. DateTime.Parse(myString); 这段代码有什么问题? A:区域信息即CultureInfo没有指定.如果不指定的话,它将采用默认的机器级的设置(见:控制面板->区域和语 ...

  9. C# 传统的ToString

    C# 传统的ToString DataRow dr=item; var str=dr["Name"]; str.ToString();//dr["Name"]= ...

  10. python语法32[装饰器decorator](转)

    一 装饰器decorator decorator设计模式允许动态地对现有的对象或函数包装以至于修改现有的职责和行为,简单地讲用来动态地扩展现有的功能.其实也就是其他语言中的AOP的概念,将对象或函数的 ...