css技巧集锦

实战中遇到的问题，一个一个整理……

固定表头

盒子结构如图，基本思路是将两张内容完全一样的表层叠，用其中一张表盖在另一张表上，暂且称之为上层表（紫盒）和下层表（绿盒），另外还需要一个最外层容器（红盒）以及一个蒙层（黄盒）。

首先解释下为什么这么麻烦，直接下层表 thead { position: fixed} 不行么？不行。因为fixed元素会脱离文档流，而thead是内联块，没有其他元素或tbody撑开的话会收缩，导致表头列宽与表身错位。

那为什么需要蒙层而不是直接隐藏下层表的表身呢？因为 tbody { display: none } 方式隐藏会将表身的占位从文档流中抹掉，导致表头没有内容撑开而收缩错位，和上面的情形相似；而 tbody { visibility: hidden }方式隐藏虽然不会使表头收缩，但表身原本的位置却还在，还是要依靠蒙层将上层表的表身盖上来，如此设置多此一举。所以两种隐藏方式都不能取。

具体如何操作

• 四个元素是简单的嵌套关系

<div class="container">
    <table class="show-thead">
        <thead>
            <!-- …… -->
        </thead>
        <tbody>
            <!-- …… -->
        </tbody>
    </table>
    <div class="mask has-scroll-bar">
        <table class="show-tbody">
            <thead>
                <!-- …… -->
            </thead>
            <tbody>
                <!-- …… -->
            </tbody>
        </table>
    </div>
</div>

• 先设置这四个元素的公共样式：

{
  margin: 0;
  padding: 0;
}

• 红盒

.container {
  position: fixed;	/* 必须必须必须必须 */
  top: $top;		/* 任意 */
  bottom: $bottom;	/* 任意 */
  left: $left;		/* 任意 */
  right: $right;    /* 任意 */
  background-color: $bgc;
}

• 绿盒（下层表）不用额外设置css，让它自动撑开紧贴红盒内边框就行
• 黄盒（蒙层）css的关键是盖住下层表的tbody，留出thead，也就是说其top值等于表头的高度

.mask {
  position: absolute;
  top: $表头line-height;
  bottom: 0;
  width: 100%;
}

• 紫盒（上层表）css的关键是隐藏自身表头，这里玩个障眼法，让其表头部分超出蒙层，就看不见啦！

.show-tbody {
  position: absolute;
  top: -1 * $表头line-height;
}

• 最后建议将scrollbar放在蒙层中，附一个其他同学写的scrollbar样式

.has-scroll-bar{
  overflow-y: auto;
}

.has-scroll-bar::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.has-scroll-bar::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
}
.has-scroll-bar::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : $content-fontcolor;
}

更新中……坚持……