首先声明：

这只是探讨一种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. Flume的Avro Sink和Avro Source研究之二 ： Avro Sink

    啊,AvroSink要复杂好多:< 好吧,先确定主要问题: AvroSink为啥这么多代码?有必要吗?它都有哪些逻辑需要实现? 你看,avro-rpc-quickstart里是这么建client ...

  2. BZOJ3242/UOJ126 [Noi2013]快餐店

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  3. sql中的group by 和 having 用法

    sql中的group by 用法:-- Group By语句从英文的字面意义上理解就是“根据(by)一定的规则进行分组(Group)”.--它的作用是通过一定的规则将一个数据集划分成若干个小的区域,然 ...

  4. print webpage

    使用浏览器打印网页时(A4纸)有一个固定的尺寸: 高级浏览器: width:700px height:1000px

  5. Redis简介 & 与Memcache的区别

    redis 是一个基于内存的高性能key-value数据库.   Reids的特点 Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载在内存当中进行操 ...

  6. python中的list()函数和tuple()函数

    tuple函数:将一个序列作为参数,并把它转化为元组,如果参数是元组,将会原样返回: >>> tuple([1,2,3]) (1, 2, 3) >>> tuple( ...

  7. hzau 1200 Choosy in Food

    1200: Choosy in Food Time Limit: 1 Sec  Memory Limit: 1280 MBSubmit: 32  Solved: 5[Submit][Status][W ...

  8. LeetCode OJ：Subsets II（子集II）

    Given a collection of integers that might contain duplicates, nums, return all possible subsets. Not ...

  9. Codeforces Round #258 (Div. 2)C(暴力枚举)

    就枚举四种情况,哪种能行就是yes了.很简单,关键是写法,我写的又丑又长...看了zhanyl的写法顿时心生敬佩.写的干净利落,简直美如画...这是功力的体现! 以下是zhanyl的写法,转载在此以供 ...

  10. APP登录的机制

    1.APP每次发送请求时,都会发送header给服务器,服务器去校验传过来的信息是否正确:校验成功后登录成功,若传入的信息不符合该用户的信息则服务器判断,传给APP登录失败 每次的请求都会传入上图中的 ...