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的表頭和第一列內容

完整實例代碼：

您的項目需求