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

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及以上

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