web 中怎么实现斜线表头效果?

 

如果是自己用 table 实现的表格,可以用下面的两个方法:

1. 直接做一个带有斜线和文字的图片,在 html 中引用。

缺点:要求图片大小能和格子大小相同。页面做了自适应的功能的话,图片上的线可能会失真,效果不够理想。

2. 用 css3 的标签 canvas,将其作为画布画一条斜线。

缺点:会存在浏览器兼容性问题,如果只需要在 chrom 中使用可以考虑。

其实现在大部分项目中做表都会用报表工具,工具中就基本都有这个功能了,设置方式也很简单,润乾报表中只要直接点选个按钮就轻松实现效果,也不用担心有什么浏览器兼容的问题,具体可以参考看下文章 那些特殊边框效果在报表中要怎样实现?
文章中除了斜线表头外,还有其他类型的特殊边框效果的实现方法。

关键词: 斜线表头效果 单元格斜线表头