189 8069 5689

CSS中怎么实现表格斜线效果

这期内容当中小编将会给大家带来有关CSS中怎么实现表格斜线效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

专业从事网站制作、成都做网站,高端网站制作设计,微信小程序定制开发,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务,采用H5开发+CSS3前端渲染技术,响应式网站设计,让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组,与您实时在线互动,随时提供解决方案,畅聊想法和感受。

首先创建一个结构:

示例代码

 类别 姓名 

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

示例代码

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

两个标签来设置两个分类,分别将它们设置为块状结构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.还有就是斜线条不能设置颜色。

完整的代码如下:

示例代码

    用CSS实现网页表格斜线-CSS在线  *{padding:0;margin:0;}  caption{font-size:14px;font-weight:bold;}  table{border-collapse:collapse;border:1px#525152solid;  width:50%;margin:0auto;margin-top:100px;}  th,td{border:1px#525152solid;text-align:center;  font-size:12px;line-height:30px;background:#C6C7C6;}  th{background:#D6D3D6;}  /*表格斜线*/  .out{  border-top:40px#D6D3D6solid;/*上边框宽度等于表格***行行高*/  width:0px;/*让容器宽度为0*/  height:0px;/*让容器高度为0*/  border-left:80px#BDBABDsolid;/*左边框宽度等于表格***行***格宽度*/  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;}          类别 姓名         张三       李四       王五       赵六      
用CSS实现网页表格斜线-  CSS在线
年级班级成绩班级均分
26261
14867
57963
48966
  

上述就是小编为大家分享的CSS中怎么实现表格斜线效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


本文题目:CSS中怎么实现表格斜线效果
本文网址:http://cdxtjz.cn/article/ijsojh.html

联系我们

您好HELLO!
感谢您来到成都网站建设公司,若您有合作意向,请您为我们留言或使用以下方式联系我们, 我们将尽快给你回复,并为您提供真诚的设计服务,谢谢。
  • 电话:028- 86922220 18980695689
  • 商务合作邮箱:631063699@qq.com
  • 合作QQ: 532337155
  • 成都网站设计地址:成都市青羊区锣锅巷31号五金站写字楼6楼

小谭建站工作室

成都小谭网站建设公司拥有多年以上互联网从业经验的团队,始终保持务实的风格,以"帮助客户成功"为已任,专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司;我们对营销、技术、管理都有自己独特见解,小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务!

小谭观点

相对传统的成都网站建设公司而言,小谭是互联网中的网站品牌策划,我们精于企业品牌与互联网相结合的整体战略服务。
我们始终认为,网站必须注入企业基因,真正使网站成为企业vi的一部分,让整个网站品牌策划体系变的深入而持久。