CSS—table—固定列和行

帝博格T－bag

已于 2022-05-21 12:00:18 修改

阅读量3.7k

点赞数 1

分类专栏： CSS Vue 文章标签： css 前端

于 2021-08-11 00:19:48 首次发布

本文链接：https://blog.csdn.net/m0_37616866/article/details/119582357

版权

Vue 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

给table表格设置固定布局

table {
	table-layout: fixed // 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义
}

设置单元格th 或 td 固定定位

.main .sticky {
    position: sticky;  // 表现类似于relative 和fixed 的合体
     z-index: 1; // 让固定层比滑动层的层级高一级
     background-color: lightpink; // 用于滑动时，挡住滑动层的内容
 }

设置单元格(th、td)到table左上角的距离

:style="index < 4 ? {'left':width*index + 'px'} : {}"
:style="index < 2 ? {'top':height*(index+1) + 'px'} : {}"

滚动时，固定部分只包括td或、th的宽度和高度的内容，不包括 boder 边框，所以滚动时，边框无法一起滚动。
解决方案分两步：1. 给td增加1px的高度；2.使用before或者after伪类，模拟边框并定位，代码如下

td
   position: sticky;
   z-index: 1;
   background-color: #fff;
   height:31px
   &::before
    position: absolute;
    content: '';
    left: 0 ;
    bottom: 0;
    width:100%
    height:1px 
    background:#bbcae7;

把案例代码到复制到本地，使用浏览器看效果，如果给你开发或者学习带来帮助，记得一键三连，谢谢大家鼓励和支持。
6. 案例代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS实现表格首行和首列固定</title>
    <!-- 插入Vue -->
    <!-- PS: 如果页面加载不出来，请检查vue引入是否正常，如无法打开，请到前端CDN库查找对应的资源引入，推荐网址 https://blog.csdn.net/muzihuaner/article/details/122264730 -->
    
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.common.dev.js"></script>
    <style>
        .main {
            width: 1000px;
            overflow: auto;
            height: 208px;
            /* 设置固定高度 */
        }
        td,
        th {
            /* 设置td,th宽度高度 */
            border: 1px solid gray;
            width: 100px;
            height: 30px;
        }

        th {
            background-color: lightblue;
        }

        table {
            table-layout: fixed;
            width: 100%;
            /* 固定宽度 */
        }

        .main .sticky {
            position: sticky;
            z-index: 1;
            background-color: lightpink;
        }
    </style>
</head>

<body>
    <div id="app">
    	<!-- 列固定案例 -->
        <div class="main">
            <table cellspacing="0">
                <thead>
                    <tr>
                        <!-- <th v-for="(item, index) in 20" :class="{'sticky' : index < 4 }" :style="leftStyle(index)">头部测试{{item}}</th> -->
                        <th v-for="(item, index) in 20"
                         :key="index" 
                         :class="{'sticky' : index < 4 }"
                         :style="index < 4 ? {'left':width*index + 'px'} : {}">
                         头部测试{{item}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in 4" :key="index">
                        <!-- 判断较为复杂的逻辑建议用计算函数 -->
                        <td v-for="(item1,index1) in 20"
                         :key="index"
                         :class="{'sticky' : index1 < 4 }"
                         :style="leftStyle(index1)">
                         测试{{item1}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
		<!-- 行固定案例 -->
        <div class="main">
            <table cellspacing="0">
                <thead>
                    <tr>
                        <!-- <th v-for="(item, index) in 20" :class="{'sticky' : index < 4 }" :style="leftStyle(index)">头部测试{{item}}</th> -->
                        <th v-for="(item, index) in 20"
	                       :key="index"
	                       class="sticky"
	                       style="top: 0px;">
	                       头部测试{{item}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in 20" :key="index">
                        <!-- 判断较为复杂的逻辑建议用计算函数 -->
                        <td
                         v-for="(item1,index1) in 20"
                         :key="index"
                         :class="{'sticky' : index < 2 }"
                         :style="index < 2 ? {'top':height*(index+1) + 'px'} : {}">
                         测试{{item1}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello',
            width: 104,
            height: 34
        },
        computed: {
            leftStyle() {
                return function (index) {
                    return index < 4 ? {
                        left: this.width * index + 'px'
                    } : {}
                }
            }
        }
    })
</script>

</html>