html表格左上角单元格添加2条斜线的方法

1、效果

2、css代码

<style>
table {border-collapse: collapse;
}table, tr, td {border: 1px solid black;
}td {text-align: center;height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/position: relative;
}
td[class=first]{width: 100px;
}
td[class=first]:before {content: "";position: absolute;width: 1px;height: 104px;top: 0;left: 0;background-color: #000;display: block;transform: rotate(-75deg);transform-origin: top;-ms-transform: rotate(-75deg);-ms-transform-origin: top;
}
td[class=first]:after {content: "";position: absolute;width: 1px;height: 75px;top: 0;left: 0;background-color: #000;display: block;transform: rotate(-45deg);transform-origin: top;-ms-transform: rotate(-45deg);-ms-transform-origin: top;
}
.title1{position: absolute;top: 0px;right:0px;
}
.title2{position: absolute;top: 26px;right:0px;
}
.title3{position: absolute;top: 30px;left:0px;
}
</style>

3、html代码

<table><tr><td class="first" colspan="2"><span class="title1">产品</span><br><span class="title2">报道量</span><br><span class="title3">地区</span></td><td>小米手机</td><td>华为手机</td><td>苹果手机</td></tr><tr><td>1</td><td>天津市</td><td></td><td></td><td></td></tr><tr><td>2</td><td>北京市</td><td></td><td></td><td></td></tr></table>

以上就是分隔单元格的方法。
利用

:after

:before

transform: rotate(-75deg);
transform-origin: top;
调整分割线位置等。

支持：ie9及以上

注意，加斜线的单元格的宽高需要时固定值，否则会乱掉。

html表格左上角单元格添加2条斜线的方法相关推荐

表格中单元格之间分隔线的隐藏方法
表格中单元格之间分隔线的隐藏方法第一行第二行第三行这个表格去掉了单元格之间的纵向分隔线第第第一二三列列列这个表格去掉了单元格之间的横向分隔线横线竖 ...
table表格表头单元格添加斜线
<!DOCTYPE html> <html> <head><title>表格斜线</title><style>html {hei ...
html中如何定义斜框,html表格单元格添加斜下框线的方法
一.分隔单元格的方法 1.用"transform: rotate(-55deg);"把一条水平线旋转一定角度就成斜线了 2.利用以下命令调整分割线位置等. :after :befo ...
EXCEL表格中单元格的左上角的绿颜色小三角形怎么添加？怎么消除？
EXCEL表格中单元格的左上角绿颜色的小三角形: 因为EXCEL有个自动检查错误的功能,出现绿色小三角是在提示用户:这里的单元格和周围的单元格存储的形式不一样,一般周围的是用数据形式存储的而带上绿色小 ...
layui表格单元格添加下拉选择功能
layui表格单元格添加下拉选择功能 1.修改表头 2.更新数据 3.修改样式代码如下: <style>/*表格单元格里显示下拉框,添加后样式不对,需要自己调整一下样式使得下拉框与单元格 ...
如何给excel的单元格添加斜线并在对角线
问 如何给excel的单元格添加斜线并在对角线两边添加内容 答 选中要添加斜线表头的单元格点右键选择设置单元格格式点边框选项卡选择边框选项的最后一个对角线即 ...
c++中整形输入逗号_Excel 2013中单元格添加下拉列表的方法
使用Excel录入数据的时候我们通常使用下拉列表来限定输入的数据,这样录入数据就很少发生错误了.Excel 2013较以前的版本发生了很大的变化,那么在Excel 2013是如何添加下拉列表的呢? 下 ...
EduCoder-Web程序设计基础-html5-表格基本结构-第4关：表格中单元格样式的设置
目录任务描述相关知识编程要求测试说明代码示例任务描述本关任务:编写一个两行两列的表格网页,表格中的单元格样式进行设置.效果如下图所示: 表格效果3 相关知识为了完成本关任务,你需要掌握 ...
Aspose.Words for .NET使用表格教程之水平和垂直合并表格中单元格
Aspose.Words For .Net是一种高级Word文档处理API,用于执行各种文档管理和操作任务.API支持生成,修改,转换,呈现和打印文档,而无需在跨平台应用程序中直接使用Microsof ...

html表格左上角单元格添加2条斜线的方法

html表格左上角单元格添加2条斜线的方法相关推荐

最新文章

热门文章