用div css模拟表格对角线

<!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>
<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>
<div>http://www.999jiujiu.com/</div>
</body>
</html>

时间： 2024-10-22 15:32:10

用div css模拟表格对角线的相关文章

【转载】用div+css模拟表格对角线

本文引用蓝色理想论坛. 首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见的作法是用图片的方式来处理,还有就是用vml来画对角线,能不能用html+css方式来实现呢?答案是肯定的,下面我们来摸拟一个表格对角线. 原理: 用边框线来摸拟斜线,我们知道,如果将一个DIV的边框线设置得足够宽并定义了不同的颜色时,其相邻的两条边框线交界处就是斜线.知道了

div+css制作表格

html: <div class="table"> <h2 class="table-caption">花名册:</h2> <div class="table-column-group"> <div class="table-column"></div> <div class="table-column"></div&

再论：div+css对网站的好处

1,内容和形式分离,网页前台只需要显示内容就行,形式上的美工交给CSS来处理.生成的HTML文件代码精简,更小打开更快. 2,改版网站更简单容易了,不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版.对于门户网站来说改版就像换件衣服一样简单容易. 3,css+div使改版网站更简单容易!不用重新设计排版网页,甚至于不用动原网站的任何HTML和程序页面,只需要改动CSS文件就完成了所有改版. DIV+CSS对于门户网站来说改版就像换件衣服一样简单

浅谈分析表格布局与Div+CSS布局的区别

(1)表格布局 表格布局容易掌握,布局方便.但表格布局需要通过表格的间距或者使用透明的gif图片来填充布局板块间的间距,这样布局的网页中表格会生成大量难以阅读和维护的代码:而且表格布局的网页要等整个表格下载完毕后才能显示所有内容,所有表格布局浏览速度较慢[2]. (2)CSS+DIV布局 通常要实现比较精确和自适应的层布局需要设置层的样式,即用CSS控制层的位置.CSS+DIV布局采用Div来定位,通过Div的border(边框).padding(填充).margin(边界)和Float(浮动)

初学者用div+css结构写网页的几个误区

1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布局没有一定的语义,网页代码修改起来比较麻烦. 在写一些栏目块时,特别是数据分类较多,比如“求购信息”的栏目块,顶部可能出现“发布人.发布时间.信息标题.联系方式”等项目,像这样的地方建议还是要用table来写,因为table是专门用来写数据表格的,控制起来很方便,而且符合语义要求,还有页面中出现类似

div+css通用兼容性代码整理

一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} 复制代码 代码如下: <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */

div+css模式编写html静态网页例子_仿照网页制作

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="citizens.css"> 7 </head&

DIV+CSS重构页面时要注意的小陷阱

1\注意你用的是那一种DOCTYPE. 2\CSS要分为多少个文件? 3\采用link和import方式导入样式表有什么不同? 4\注意页面的层次结构,用好ul和li 5\注意h1,h2,h3,h4的区别 6\要记得清除浮动. 7\记得用class或是id 对页面的结构进行一些说明. 8\HTML和CSS都要用<!---->加上适当的注释. 9\不要直接在html的标签中写style 10\JS代码不要直接在对应的标签中写.现在可以调用jquery或是mootools来绑定事件. 11\DIV

深度理解div+css布局嵌套盒子

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们