html添加斜线
来源：互联网 发布：尼尔机械纪元pc优化 编辑：程序博客网 时间：2024/04/27 22:01
1、利用div的上边框和左边框
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用div+css模拟表格对角线</title>
<style type="text/css">
table{ border-collapse:collapse;border:1px #525152 solid;width:90%;margin:0 auto;margin-top:100px;}
th,td{border:1px solid #525152;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;}
th{background:#D6D3D6;}
/*模拟对角线*/
.out{
border-top:25em #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/
border-left:80px#BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/
position:relative;/*让里面的两个子容器绝对定位*/
}
b{font-style:normal;display:block;position:absolute;top:-23em;left:-75px;width:80px;}
em{font-style:normal;display:block;position:absolute;top:-40px;left:-90px;width:80px;}
.assessDetail td{background-color: #FFF;}
</style>
</head>
<body>
<table>
<tr>
<th style="width:80px;" >
<div class="out">
<b>内容及标准</b>
<em>考核对象</em>
</div>
</th>
<th>年级</th>
<th>班级</th>
<th>成绩</th>
<th>班级均分</th>
<th style="width:80px;" rowspan="3">总分</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="assessDetail">
<td>部门</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="assessDetail">
<td>办公室</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
2、利用伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>td加斜线</title>
<style>
table{
border-collapse:collapse;
}
table,tr,td{
border:1px solid black;
}
td{
width:100px;/*这里需要自己调整，根据自己的需求调整宽度*/
height:50px;/*这里需要自己调整，根据自己的需求调整高度*/
position: relative;
}
td[class=first]:before{
content: "";
position: absolute;
width: 1px;
height:114px;/*这里需要自己调整，根据td的宽度和高度*/
top:0;
left:0;
background-color: black;
display: block;
transform: rotate(-63deg);/*这里需要自己调整，根据线的位置*/
transform-origin: top;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td class="first"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
- html添加斜线
- html表格左上角单元格添加2条斜线的方法
- word表格添加斜线
- label上添加斜线
- html表格中画斜线
- html table 表头 分割斜线
- HTML 画斜线（非HTML5 Canvas）
- 采用CSS实现Html斜线表头
- html 表格表头画一条斜线
- 在table中添加一条斜线
- Apache自动添加地址末尾的斜线
- 在表格中加入斜线(html页面设计)
- 使用HTML的canvas，给表格画斜线
- div+css编写html的table表头斜线
- Eclipse添加断点无效，断点图标有斜线
- word2010中如何在斜线表格中添加文字
- 如何给excel的单元格添加斜线并在对角线
- 斜线与反斜线
- c语言初步经典题2---计算两个电阻并联后的阻值
- HDU 4372 Count the Buildings
- 1412: QAQ & 君临天下 || 天行九歌 [区间]
- 关于Python中 from Crypto.Cipher import AES这个死活报错的问题
- 对数据基本类型的强制转换，自动转换的理解
- html添加斜线
- lower_bound和upper_bound函数
- 线段树——区间更新——ZOJ
- Ratchet 服务器应用配置
- 数据缓存+listview分页加载+日夜间模式切换
- pytorch安装
- eclipse 启动，同时启动的虚拟机吗？
- 编辑TIN时设置参数为esriTinSurfaceType.esriTinHardReplace导致边缘不整齐的问题
- 进阶并查集问题分析
