html表格实现固定table的表头和第一列内容

页中实现像表格文档那样固定table的表头和第一列内容，类似于excel表格那样！下面说说实现方法

效果如下：

在数据众多的列表下，规定的区域内上下左右都可以滚动查看，然而表头和侧边表头都还在，方便用户查看数据，增强用户体验！

实现代码

html结构：

css代码：

javascript代码：

击“了解更多”获取Kendo UI for jQuery R1 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

锁定（冻结）列使您可以在用户水平滚动网格时始终显示特定列。

有关可运行的示例，可参阅有关在Grid中实现锁定列的演示。

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>


<script src="js/kendo.all.min.js"></script>

</head>
<body>
<div id="example">
<div id="grid"></div>

<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipCity: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30
},
height: 540,
sortable: true,
reorderable: true,
groupable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
locked: true,
lockable: false,
width: 150
}, {
field: "ShipCountry",
title: "Ship Country",
width: 300
}, {
field: "ShipCity",
title: "Ship City",
width: 300
},{
field: "ShipName",
title: "Ship Name",
locked: true,
width: 300
}, {
field: "ShipAddress",
lockable: false,
width: 400
}
]
});
});
</script>
</div>

</body>
</html>

为了使该功能正常运行，必须提供以下配置设置。它们确保至少一个非锁定列始终可见，并且可以水平滚动非锁定列。如果预期的水平空间不足，则不会出现水平滚动条。

启用滚动。
首先锁定至少一列。
定义网格的高度。
为所有列设置显式像素宽度，允许网格调整已冻结和未冻结表部件的布局。
确保所有锁定列的总宽度等于或小于网格的宽度减去滚动条宽度的三倍。
确保未在隐藏容器内初始化网格。

注意：

Grid的JavaScript API允许您动态锁定和解锁列。但是，只有在初始化期间至少锁定一列时，才有可能这样做。应用冻结的列时，网格的HTML输出和脚本操作是不同的，这就是初始化后小部件无法在冻结和未冻结模式之间切换的原因。
锁定的列只能位于网格的左侧，不支持将它们放置在右侧。
行模板和详细信息功能不与锁定列结合使用，如果使用多列标题，则只能将列锁定在最顶层。

锁定的列无法触摸滚动，因为它们被封装在一个具有溢出：隐藏样式的容器中。要解决台式机设备上的此限制，请使用mousewheel事件。但是，触摸设备不存在任何解决方法。

锁定列依赖于同步网格的冻结和非冻结部分的行高，某些浏览器（例如Internet Explorer 9和Firefox）要求以像素为单位设置行高样式。否则，由于子像素问题，同步可能无法正常工作。

div.k-grid td
{
line-height: 18px;
}

当您实现自定义代码并依靠选择器或以Grid表为目标时，Grid为其锁定和可滚动部分创建单独的表。锁定列位于.k-grid-content-locked元素内，而可滚动内容位于.k-grid-content元素内。

CSS table表格 thead固定 tbody滚动效果

由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！

实现思路：

将内容要滚动的区域控制在 tbody 标签中添加 overflow-y: auto; 样式，给 tr 标签添加 table-layout:fixed; (这是核心)样式，由于 tbody 有了滚动条后，滚动条也要占位，又会导致 tbody 和 thead 不对齐，所以在设置 tbody 的宽度时要把滚动条的宽度也加上【如果不想显示滚动条的话，可以把滚动条的宽度设置为0px，滚动条就没有了。

下面是效果图，具体完整实例代码也在下面：

完整实例代码：

<!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>纯CSS table表格 thead固定 tbody滚动</title>
    <style>
        .table-box {
            margin: 100px auto;
            width: 1024px;
        }
 
        /* 滚动条宽度 */
        ::-webkit-scrollbar {
            width: 8px;
            background-color: transparent;
        }
 
        /* 滚动条颜色 */
        ::-webkit-scrollbar-thumb {
            background-color: #27314d;
        }
 
        table {
            width: 100%;
            border-spacing: 0px;
            border-collapse: collapse;
        }
 
        table caption{
            font-weight: bold;
            font-size: 24px;
            line-height: 50px;
        }
 
        table th, table td {
            height: 50px;
            text-align: center;
            border: 1px solid gray;
        }
 
        table thead {
            color: white;
            background-color: #38F;
        }
 
        table tbody {
            display: block;
            width: calc(100% + 8px); /*这里的8px是滚动条的宽度*/
            height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
 
        table tfoot {
            background-color: #71ea71;
        }
 
        table thead tr, table tbody tr, table tfoot tr {
            box-sizing: border-box;
            table-layout: fixed;
            display: table;
            width: 100%;
        }
 
        table tbody tr:nth-of-type(odd) {
            background: #EEE;
        }
 
        table tbody tr:nth-of-type(even) {
            background: #FFF;
        }
 
        table tbody tr td{
            border-bottom: none;
        }
 
    </style>
</head>
 
<body>
    <section class="table-box">
        <table cellpadding="0" cellspacing="0">
            <caption>纯CSS table表格 thead固定 tbody滚动</caption>
            
            <thead>
                <tr>
                    <th>序 号</th>
                    <th>姓 名</th>
                    <th>年 龄</th>
                    <th>性 别</th>
                    <th>手 机</th>
                </tr>
            </thead>
 
            <tbody>
                <tr>
                    <td>001</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>002</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>003</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>004</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>005</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>006</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>007</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>女</td>
                    <td>Mobile</td>
                </tr>
                <tr>
                    <td>008</td>
                    <td>Name</td>
                    <td>28</td>
                    <td>男</td>
                    <td>Mobile</td>
                </tr>
            </tbody>
 
            <tfoot>
                <tr>
                    <td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
                </tr>
            </tfoot>
        </table>
    </section>
</body>
 
</html>

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

原文链接：https://blog.csdn.net/muguli2008/article/details/103787152

在线咨询

上一篇：LG V60 ThinQ具有双屏显示功能–如此逼真
下一篇：HTML样式：好看的颜色字体是有方法的

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html表格实现固定table的表头和第一列内容

完整实例代码：

您的项目需求