首先声明：

这只是探讨一种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. 洛谷——P1023 税收与补贴问题

    P1023 税收与补贴问题 题目背景 每样商品的价格越低,其销量就会相应增大.现已知某种商品的成本及其在若干价位上的销量(产品不会低于成本销售),并假设相邻价位间销量的变化是线性的且在价格高于给定的最 ...

  2. [leetcode trie]211. Add and Search Word - Data structure design

    Design a data structure that supports the following two operations: void addWord(word) bool search(w ...

  3. 浏览器在线查看pdf文件 pdf.js的使用教程

    谷歌浏览器可以直接在线查看pdf,而IE内核浏览器无法在线查看,默认是下载. 这里用到的是pdf.js,不仅支持IE内核浏览器,而且兼容手机查看pdf 官网地址:http://mozilla.gith ...

  4. 安卓 开机 动画 酷派大神F1开机动画 美化 自定义 修改

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 酷派大神F1开机动画.rar

  5. 希尔排序之Java实现

    希尔排序之Java实现 一.方法一 package cn.com.zfc.lesson21.sort; /** * * @title ShellSort * @describe 希尔排序 1959 年 ...

  6. 2333: [SCOI2011]棘手的操作[我不玩了]

    2333: [SCOI2011]棘手的操作 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1979  Solved: 772[Submit][Stat ...

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

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

  8. tsinsen A1067. Fibonacci数列整除问题 dp

    A1067. Fibonacci数列整除问题 时间限制:1.0s   内存限制:512.0MB   总提交次数:2796   AC次数:496   平均分:51.83 将本题分享到:     查看未格 ...

  9. 小程序在wxml页面中取整

    小程序无法像html中,在页面中直接parseInt() index.wxml {{price | Int}} 小程序还有另一种处理方法 wxs 是一种类似于js脚本的东西 filters.wxs v ...

  10. linux 定时任务 crontab 详细解释(转)

    cron 是linux的内置服务,但它不自动起来,可以用以下的方法启动.关闭这个服务:  引用:  /sbin/service crond start //启动服务  /sbin/service cr ...