> 详解如何用div+css模拟表格对角线
详解如何用div+css模拟表格对角线
这只是探讨一种CSS模拟表格对角线的用法，实际在工作中可能觉得这样做有点小题大作，这不是本主题讨论的重点。如果对此深以为然的朋友，请一笑过之。。。
有时在插入文档时，要用到表格对角线，常见的作法是用图片的方式来处理，还有就是用vml来画对角线，能不能用html+css方式来实现呢？答案是肯定的，下面我们来摸拟一个表格对角线。
用边框线来摸拟斜线，我们知道，如果将一个DIV的边
框线设置得足够宽并定义了不同的颜色时，其相邻的两条边框线交界处就是斜线。知道了这个原理，我们就可以用border-left和border-top来模拟出斜线的效果。
我们先创建一个结构：
& &div class=&out&&
&&& &b&类别&/b&
&&& &em&姓名&/em&
我们用&div class=&out&&作为对角线的容器，我们来设置斜线样式，关键代码如下：
&& border-top:40px #D6D3D6/*上边框宽度等于表格第一行行高*/
&& width:0/*让容器宽度为0*/
&& height:0/*让容器高度为0*/
&& border-left:80px #BDBABD/*左边框宽度等于表格第一行第一格宽度*/&&&&&&
& position:/*让里面的两个子容器绝对定位*/
&b&和&em&两个标签来设置两个分类，分别将它们设置为块状结构display:清除其默认的字体样式font-style:normal；因其父容器设置了相对定位，所以设置其为绝对定位，这样可以将它偏移到你想指定的位置了。
b{font-style:display:position:top:-40left:-40width:35}
em{font-style:display:position:top:-25left:-70width:55x;}&&&&&&
这样一个斜线对角线就模拟出来了。知道了原理，你可以变成很多有趣的东西出来，祝你好运！
这种对角线模拟法也有缺点：
宽高度必须是已知的
宽高的长度不能差得太大，你可以试试将宽度拉得比高度长好几倍，看看效果。（给你们留点作业练习练习）
还有就是斜线条不能设置颜色。
另：以上代码只测试了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&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&用div+css模拟表格对角线&/title&
&style type=&text/css&&
padding:0;
font-size:14
font-weight:
border-collapse:
border:1px #525152
width:50%;
margin-top:100
border:1px #525152
text-align:
font-size:12
line-height:30
background:#C6C7C6;
background:#D6D3D6;
} /*模拟对角线*/
border-top:40px #D6D3D6/*上边框宽度等于表格第一行行高*/
width:0/*让容器宽度为0*/
height:0/*让容器高度为0*/
border-left:80px #BDBABD/*左边框宽度等于表格第一行第一格宽度*/
position:/*让里面的两个子容器绝对定位*/
font-style:
font-style:
width:55x;
background:#BDBABD;
用div+css模拟表格对角线
&/caption&
&th style=&width:80&& &div class=&out&& &b&类别&/b& &em&姓名&/em& &/div&
&th&年级&/th&
&th&班级&/th&
&th&&NOBR oncontextmenu=&return false& onmousemove=kwM(2) id=clickeyekey2 onmouseover=&kwE(event,2, this)& style=&COLOR: #6600 BORDER-BOTTOM: #6600ff 1 BACKGROUND-COLOR: TEXT-DECORATION: underline& onclick='kwC(event,2,&&)' onmouseout=kwL(event,this)&成绩&/NOBR&&/th&
&th&班级均分&/th&
&td class=&t1&&张三&/td&
&td&三&/td&
&td&2&/td&
&td&62&/td&
&td&61&/td&
&td class=&t1&&李四&/td&
&td&三&/td&
&td&1&/td&
&td&48&/td&
&td&67&/td&
&td class=&t1&&王五&/td&
&td&三&/td&
&td&5&/td&
&td&79&/td&
&td&63&/td&
&td class=&t1&&赵六&/td&
&td&三&/td&
&td&4&/td&
&td&89&/td&
&td&66&/td&
提示:可以对代码修改后再运行。Excel 使用技巧
单位里同事演讲用的资料_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者
评价文档：
喜欢此文档的还喜欢
Excel 使用技巧
单位里同事演讲用的资料
单​位​里​同​事​演​讲​用​的​资​料
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
大小：1.04MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢
20080份文档ppt word 三个常用软件使用技巧，值得收藏
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
MS_Office使用技巧方法大全(Excel+PPT+Word页
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口查看: 6760|回复: 8
阅读权限3UID156771函数0 关最后登录经验277 点在线时间26 小时VBA0 关分享记录好友技巧0 关相册主题段位0 段金币399 个积分277精华0帖子日志注册时间
幼儿园大班, 积分 277, 距离下一级还需 23 积分
金币399 个积分277帖子
请教老师。如何把一格斜着一分为二。谢谢
阅读权限20UID63686函数0 关最后登录经验816 点在线时间68 小时VBA0 关分享记录好友技巧0 关相册主题段位1 段金币4978 个积分986精华0帖子日志注册时间
金币4978 个积分986帖子
斜线表头 ？？？？？？
坛友帮我点点这个连接吧
谢谢 我的blog：http://hxqzccct.
阅读权限9UID233310函数0 关最后登录经验1770 点在线时间44 小时VBA0 关分享记录好友技巧12 关相册主题段位5 段金币69 个积分1961精华0帖子日志注册时间
函入3期班主任
小学6年级, 积分 1961, 距离下一级还需 139 积分
金币69 个积分1961帖子
21:55 上传
请教老师。如何把一格斜着一分为二。谢谢
保持阳光心情
走向阳光未来
/uploadface/730.jpg
阅读权限3UID156771函数0 关最后登录经验277 点在线时间26 小时VBA0 关分享记录好友技巧0 关相册主题段位0 段金币399 个积分277精华0帖子日志注册时间
幼儿园大班, 积分 277, 距离下一级还需 23 积分
金币399 个积分277帖子
谢谢，但上下对角又如何打上字呢，再次谢谢
阅读权限7UID271423函数2 关最后登录经验1376 点在线时间30 小时VBA0 关分享记录好友技巧0 关相册主题段位0 段金币164 个积分1406精华0帖子日志注册时间
小学4年级, 积分 1406, 距离下一级还需 94 积分
金币164 个积分1406帖子
论坛上有好多,自己搜一下吧
阅读权限3UID156771函数0 关最后登录经验277 点在线时间26 小时VBA0 关分享记录好友技巧0 关相册主题段位0 段金币399 个积分277精华0帖子日志注册时间
幼儿园大班, 积分 277, 距离下一级还需 23 积分
金币399 个积分277帖子
搜不到啊，请指点，谢谢
阅读权限7UID271423函数2 关最后登录经验1376 点在线时间30 小时VBA0 关分享记录好友技巧0 关相册主题段位0 段金币164 个积分1406精华0帖子日志注册时间
小学4年级, 积分 1406, 距离下一级还需 94 积分
金币164 个积分1406帖子
1.先在格输入姓名2.格式菜单/拼音指南/激活显示或隐藏中的(使之显示)3.格式菜单/拼音指南/编辑(先敲空格到合适位置再输入分数)4.在格式菜单/拼音指南/字体(调整自己需要的字号)5.在单元格格式中斜线
阅读权限7UID271423函数2 关最后登录经验1376 点在线时间30 小时VBA0 关分享记录好友技巧0 关相册主题段位0 段金币164 个积分1406精华0帖子日志注册时间
小学4年级, 积分 1406, 距离下一级还需 94 积分
金币164 个积分1406帖子
再来一个:1、单击【绘图】工具栏上的【文本框】按钮 ，待鼠标变成下箭头形状时，在斜线上方添加一个文本框，然后在其中输入“年份”，2、默认格式下的文本框的文字周围有边框。若要取消，右键单击文本框，在弹出的快捷菜单中选择【设置文本框格式】菜单项，然后切换到【颜色与线条】选项卡，在【填充】组合框中的【颜色】下拉列表中选择【无填充颜色】选项，在【线条】组合框中的【颜色】下拉列表中选择【无线条颜色】选项，&&3、单击 【确定】按钮，文字周围边框消失，以同样的方法设置斜方的文字
阅读权限3UID156771函数0 关最后登录经验277 点在线时间26 小时VBA0 关分享记录好友技巧0 关相册主题段位0 段金币399 个积分277精华0帖子日志注册时间
幼儿园大班, 积分 277, 距离下一级还需 23 积分
金币399 个积分277帖子
我用的是2007版的，又如何操作，万分感谢
Powered by}