先上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table { margin: 10px; margin-bottom: 0px; height: 280px; border-collapse: collapse; /*去除多余边框*/ } tr td { border: 1px solid #ccc; text-align: center; height: 30px; line-height: 30px; font-size: 15px; color: #303030; } td.last { position: relative; } td.last:before { content: ""; position: absolute; width: 1px; height: 120px; /* 斜线长度 */ bottom: 5px; left: 5px; /* 左下角偏移5px开始 */ background-color: #ccc; display: block; transform: rotate(65deg); /* 偏移的角度，根据单元格的宽高计算 */ transform-origin: bottom; } </style> </head> <body> <table> <thead> <tr> <td style="width: 120px">分类</td> <td style="width: 120px">保证金（元）</td> <td style="width: 120px">轴数</td> </tr> </thead> <tbody> <tr> <!-- 合并5行 --> <td rowspan="5">普通货车</br>专项作业车</td> <td>1000</td> <td>2</td> </tr> <tr> <td>2000</td> <td>3</td> </tr> <tr> <td>3000</td> <td>4</td> </tr> <tr> <td>4000</td> <td>5</td> </tr> <tr> <td>5000</td> <td>6</td> </tr> <tr> <td>牵引车</td> <td rowspan="2">5000</td> <td rowspan="2" class="last"></td> </tr> <tr> <td>集装箱</td> </tr> <tr> <!-- 合并3列 --> <td colspan=‘3‘>6轴以上暂不支持办理</td> </tr> </tbody> </table> </body> </html>
效果图：
1.首先是去除多余边框
给表格一个border-collapse的属性，属性值为collapse即可合并表格的边框，显得跟紧凑。不然就是这样的：
2.合并单元格
colspan的作用是指定单元格横向跨越的单元格。
rowspan的作用是指定单元格纵向跨越的单元格。
3.加入斜线
加入斜线的方式有很多，这里采用transform方式，采用定位方式为单元格添加伪元素，利用单元格宽高计算偏移的角度，长度，涉及三角函数 ，这里为了方便，直接在控制台调整个大概
原文：https://www.cnblogs.com/Vanish-F/p/11906947.html