学习笔记 如何使用CSS实现表格斜线效果

开发 前端
本文介绍如何运用CSS实现表格斜线效果用,我们知道当网页中DIV的边框线设置得足够宽,并定义了不同的颜色时,其相邻的两条边框线交界处就是斜线。

你对使用CSS实现表格斜线效果的方法是否了解,这里和大家分享一下,当网页中DIV的边框线设置得足够宽,并定义了不同的颜色时,其相邻的两条边框线交界处就是斜线,所以我们就可以利用border-left和border-top来模拟出斜线的效果。

用CSS实现表格斜线效果

本文是介绍如何运用CSS实现表格斜线效果用,我们知道当网页中DIV的边框线设置得足够宽,并定义了不同的颜色时,其相邻的两条边框线交界处就是斜线,所以我们就可以利用border-left和border-top来模拟出斜线的效果。

首先创建一个结构:

示例代码

  1. <divclassdivclass="out"> 
  2. <b>类别</b> 
  3. <em>姓名</em> 
  4. </div> 
  5.  

我们用<divclass="out">作为对角线的容器,我们来设置斜线样式,关键代码如下:

示例代码

  1. .out  
  2. {  
  3. border-top:40px#D6D3D6solid;/*上边框宽度等于表格***行行高*/  
  4. width:0px;/*让容器宽度为0*/  
  5. height:0px;/*让容器高度为0*/  
  6. border-left:80px#BDBABDsolid;/*左边框宽度等于表格***行***格宽度*/  
  7. position:relative;/*让里面的两个子容器绝对定位*/  
  8. }  
  9.  

<b>和<em>两个标签来设置两个分类,分别将它们设置为块状结构display:block;清除其默认的字体样式font-style:normal;因其父容器设置了相对定位,所以设置其为绝对定位,这样可以将它偏移到你想指定的位置了。

示例代码

  1. b{font-style:normal;display:block;  
  2. position:absolute;top:-40px;  
  3. left:-40px;width:35px;}  
  4. em{font-style:normal;display:block;  
  5. position:absolute;top:-25px;left:-70px;width:55x;}  
  6.  

这样一个斜线对角线就模拟出来了。

◆这种对角线模拟法也有缺点:

1.宽高度必须是已知的

2.宽高的长度不能差得太大,你可以试试将宽度拉得比高度长好几倍,看看效果。

3.还有就是斜线条不能设置颜色。#p#

完整的代码如下:

示例代码

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"
  6. content="text/html;charset=utf-8"/> 
  7. <title>用CSS实现网页表格斜线-CSS在线</title> 
  8. <styletypestyletype="text/css"> 
  9. *{padding:0;margin:0;}  
  10. caption{font-size:14px;font-weight:bold;}  
  11. table{border-collapse:collapse;border:1px#525152solid;  
  12. width:50%;margin:0auto;margin-top:100px;}  
  13. th,td{border:1px#525152solid;text-align:center;  
  14. font-size:12px;line-height:30px;background:#C6C7C6;}  
  15. th{background:#D6D3D6;}  
  16. /*表格斜线*/  
  17. .out{  
  18. border-top:40px#D6D3D6solid;/*上边框宽度等于表格***行行高*/  
  19. width:0px;/*让容器宽度为0*/  
  20. height:0px;/*让容器高度为0*/  
  21. border-left:80px#BDBABDsolid;/*左边框宽度等于表格***行***格宽度*/  
  22. position:relative;/*让里面的两个子容器绝对定位*/  
  23. }  
  24. b{font-style:normal;display:block;position:absolute;  
  25. top:-40px;left:-40px;width:35px;}  
  26. em{font-style:normal;display:block;position:absolute;  
  27. top:-25px;left:-70px;width:55x;}  
  28. .t1{background:#BDBABD;}  
  29. </style> 
  30. </head> 
  31. <body> 
  32. <table> 
  33. <caption>用CSS实现网页表格斜线-  
  34. <AhrefAhref='http://www.csscss.org'>CSS在线</A></caption> 
  35. <tr> 
  36. <thstylethstyle="width:80px;"> 
  37. <divclassdivclass="out"> 
  38. <b>类别</b> 
  39. <em>姓名</em> 
  40. </div> 
  41. </th> 
  42. <th>年级</th> 
  43. <th>班级</th> 
  44. <th>成绩</th> 
  45. <th>班级均分</th> 
  46. </tr> 
  47. <tr> 
  48. <tdclasstdclass="t1">张三</td> 
  49. <td></td> 
  50. <td>2</td> 
  51. <td>62</td> 
  52. <td>61</td> 
  53. </tr> 
  54. <tr> 
  55. <tdclasstdclass="t1">李四</td> 
  56. <td></td> 
  57. <td>1</td> 
  58. <td>48</td> 
  59. <td>67</td> 
  60. </tr> 
  61. <tr> 
  62. <tdclasstdclass="t1">王五</td> 
  63. <td></td> 
  64. <td>5</td> 
  65. <td>79</td> 
  66. <td>63</td> 
  67. </tr> 
  68. <tr> 
  69. <tdclasstdclass="t1">赵六</td> 
  70. <td></td> 
  71. <td>4</td> 
  72. <td>89</td> 
  73. <td>66</td> 
  74. </tr> 
  75. </table> 
  76. </body> 
  77. </html> 
  78.  

 本文来自CSS在线:http://www.csscss.org/cssarticle/2009614134.shtml

【编辑推荐】

  1. 实例解析CSS中display属性使用
  2. CSS样式实现快速定位bug的六大技巧
  3. CSS中link和@import的区别
  4. CSS2.0中page-break-after属性用法
  5. 技术分享 使用不同CSS样式兼容多种浏览器
责任编辑:佚名 来源: csscss.org
相关推荐

2021-05-19 06:07:21

CSS 斜线效果技巧

2010-09-08 09:54:16

CSS自动换行CSS

2022-12-12 11:11:05

2010-08-06 13:22:48

FlexCSS

2010-08-31 16:35:59

CSS

2010-08-16 15:32:06

DIV+CSS

2010-09-06 10:41:22

CSS内边距

2023-07-18 15:49:22

HTMLCSS

2011-08-16 18:13:42

IPhone开发UIView动画

2016-08-30 21:05:14

JavascriptCSSWeb

2021-07-27 07:31:16

CSS 元素切换

2010-09-09 11:16:06

CSS交互

2010-09-09 12:49:58

鼠标悬停tip效果CSS

2010-09-14 12:58:41

DIV+CSS圆角

2010-09-07 14:53:45

Chroma属性CSS

2021-01-19 12:16:10

CSS前端UI

2021-12-27 07:45:30

CSS 技巧烟雾效果

2010-09-14 09:18:28

DIVCSS

2012-01-10 14:59:42

jQuery

2023-11-22 07:47:34

点赞
收藏

51CTO技术栈公众号