css表格表头对角线,用div+css模拟类excel表格对角线（斜线）
我们先看html代码吧
|
科目 姓名 |
数学 | 语文 |
|---|---|---|
| 张三 | 92 | 62 |
| 李四 | 91 | 67 |
第一种写法
css如下
* {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border: 1px #525152 solid;
width: 50%;
margin: 0 auto;
margin-top: 100px;
}
table tr:hover>td {
background-color: #ecf3f8;
}
th, td {
border: 1px #525152 solid;
text-align: center;
font-size: 12px;
line-height: 30px;
}
th {
background: #D6D3D6;
}
tr td:first-child {
background: #BDBABD;
}
/*模拟对角线*/
.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;
}
注释上已经写明了，提示.out的宽高都是0，是靠上边框撑起高度，左边框撑起宽度的。b和em是绝对定位控制上面的字的位置。
第二种写法
基于上面的，只改动.out的和对角线span、文字的定位
科目
姓名
.out{
height: 40px;
position: relative;
}
b {
font-style: normal;
display: block;
position: absolute;
top: 0px;
right: -2px;
width: 35px;
}
em {
font-style: normal;
display: block;
position: absolute;
bottom: 0;
left: -10px;
width: 55px;
}
span {
display: block;
width: 89px;
height: 1px;
background: red;
transform: rotate(26deg);
position: absolute;
top: 18px;
left: -6px;
}
css表格表头对角线,用div+css模拟类excel表格对角线（斜线）相关推荐
- 怎样在表格中选出同一类_如何在excel表格中同一个框选择下一行 - 卡饭网
在excel表格中怎样设置选择下拉列表? 在excel表格中怎样设置选择下拉列表? 在excel表格制作中,经常会遇到固定选项输入,例如性别( 男 女),婚否(是, 否),在制作考勤表的时候也可以利 ...
- c 语言如何处理表格文件中的数据库,C#程序从Excel表格中读取数据并进行处理
今天做了一个Excel表格数据处理的事情,因为数据量表较大(接近7000条)所以处理起来有点麻烦,于是写了一个程序, 先将程序记下以便将来查找. using System; using System. ...
- 怎样在表格中选出同一类_怎样将一个excel表格里头的多个同一个名称下面的多个数据筛选出来...
把这些掌握就差不多了 一.建立分类下拉列表填充项 我们常常要将企业的名称输入到表格中,为了保持名称的一致性,利用"数据有效性"功能建了一个分类下拉列表填充项. 1.在Sheet2中 ...
- SpreadJS 类Excel表格控件 - V12 新特性详解
我们很高兴的宣布:纯前端类Excel表格控件 - SpreadJS 正式推出了 V12 新版本,此次的新版本中包含了诸多重量级的功能和来自客户的新需求,如对形状和富文本的支持,也有新增的图表类型,还有 ...
- CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例
我们碰到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...
- html css网页布局实例简单,Div+CSS网页布局项目实战一（含设计图、HTML和CSS源文件）...
网页的基本结构 新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...
- 菜鸟教程css事件,【推荐】DIV+CSS入门菜鸟教程
这篇文章主要为大家详细介绍了[推荐]DIV+CSS入门菜鸟教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. CSS功能复杂多变,大多数新手莫不着 ...
- css里banner是什么,div+css banner的问题
div+css banner的问题0 coolkeys2013.09.03浏览223次分享举报 如图所示,在IE6中banner 只显示半个,在谷歌火狐中均正常显示 #banner {position ...
- 【DIV CSS】代码作业练习DIV CSS太极阴阳图
1. DIV CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下为阴 ...
最新文章
- Python:阳光热线问政平台爬虫
- 可以打游戏的计算机,还在用笔记本玩游戏？台式机才能给你极致享受
- ML之LoRDTRF：基于LoRDT(CART)RF算法对mushrooms蘑菇数据集(22+1,6513+1611)训练来预测蘑菇是否毒性(二分类预测)
- js html 追加span内容,使用JavaScript显示SPAN的内容
- 书生阅读器打开gd文件出错_CAJ论文怎么打开？
- dropMenu----简单的下拉菜单生成器
- [html] 打印页面时怎样自定义打印页眉页脚或者去掉眉页脚？
- 第 2 节：前端面试指南 — HTML篇
- Kali学习笔记5：被动信息收集工具集
- 图片裁剪（cropperjs）
- T-Sql - 数据分租求最大指定字段最大的记录
- 5. 用 PHP 源码操作 memcache(2)
- IIR滤波器设计基础及Matlab设计示例
- 元胞自动机：森林火灾模拟（Python：numpy、seaborn）
- 复合函数高阶求导公式_常用复合函数的导数公式大学微积分常用的复合函数导数,不要推理过程只要导数公式,上课的时候老师是讲了四个,...
- K8s 开先河、技能全栈、业务“无感”，深度解读云原生的这一年
- String.length() 与 String.getBytes().length
- 矩阵与逆矩阵的特征向量相同
- 4月热搜：揭秘金融级人脸实名认证解决方案背后的技术硬货
- 物联卡中心：物联网卡运营商优劣对比，你选择哪家？