采用CSS实现Html斜线表头

最新推荐文章于 2024-07-01 11:20:33 发布

hcl1687

最新推荐文章于 2024-07-01 11:20:33 发布

阅读量2.4w

点赞数 1

本文链接：https://blog.csdn.net/hcl1687/article/details/48268369

版权

本文介绍如何使用CSS3的background-size属性来创建HTML表格的斜线表头，代替复杂的JavaScript实现。这种方法简单易懂，但不兼容IE8。

摘要由CSDN通过智能技术生成

使用表格的时候，经常会用到斜线表头，如下图所示。

网上搜到的方法，通常是利用js实现斜线绘制。参考：http://qinya.iteye.com/blog/1836637

这种方式比较麻烦，要动用js，有点杀鸡用牛刀的感觉。

于是，想着通过css实现表头斜线。原理很简单，就是通过css3的background-size属性实现背景图片自适应填充。

背景图片为一个16px*16px的斜线图片。

代码如下：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
    .a-ca-head-title {
      border-right: solid 1px #e5e5e5;
      background-color: white;
      padding: 0 !important;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
    table th {
      p

最低0.47元/天解锁文章

hcl1687

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
采用CSS实现Html斜线表头

使用表格的时候，经常会用到斜线表头，如下图所示。网上搜到的方法，通常是利用js实现斜线绘制。参考：http://qinya.iteye.com/blog/1836637 这种方式比较麻烦，要动用js，有点杀鸡用牛刀的感觉。于是，想着通过css实现表头斜线。原理很简单，就是通过css3的background-size属性实现背景图片自适应填充。背景图片为一个16px*16
复制链接

扫一扫