(首列凍結)通過CSS來實現HTML表格的固定首列和

(首列凍結)通過CSS來實現HTML表格的固定首列和橫向滾動效果

果

方法一：sticky 方式

核心樣式

        .pure-table-wrapper-div {
            overflow-x: scroll;
        }
    
        table.pure-table th:first-child,
        table.pure-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: aliceblue;
        }

解釋

.pure-table-wrapper-div:
這個類名應用于包裹表格的 div 元素。它的樣式規則如下：
overflow-x: scroll;: 當內容寬度超出容器寬度時，顯示水平滾動條。這允許用戶在需要時水平滾動查看表格的所有列。

示例 HTML 結構：

<div class="pure-table-wrapper-div"> <table class="pure-table">  </table> </div>

table.pure-table th:first-child, table.pure-table td:first-child: 這兩個選擇器分別針對 .pure-table 類的表格中的第一個表頭單元格（<th>）和第一個數據單元格（<td>）。

它們定義的樣式規則如下：

position: sticky;: 使用黏性定位。黏性定位元素在滾動時會根據設置的 top、bottom、left 或 right 屬性值在特定位置 "粘附"。在本例中，由于定義了 left: 0;，這些元素會在左側邊緣粘附。 left: 0;: 在元素滾動到視口左側邊緣時使其粘附。與 position: sticky; 結合使用。

z-index: 1;: 設置元素的堆疊順序。值越大，元素越靠前。在這種情況下，將第一個單元格設置為 z-index: 1 可確保它在其他表格單元格之上。

background-color: aliceblue;: 為匹配的單元格設置背景顏色。這可以增強視覺效果，使粘附的單元格與其他單元格區分開。
這段 CSS 代碼的主要目的是實現表格的水平滾動，并固定第一列，使其在水平滾動時保持可見。同時，為第一列的單元格設置了背景顏色以增強視覺效果。

總的來說是：

使用 position: sticky; 來固定第一列。在 table.pure-table th:first-child 中設置了 position: sticky; 和 left: 0;，并將 z-index 設為 1，以確保第一列在滾動時會固定在屏幕上方。

完整代碼

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

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./purecss@3.0.0.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文檔</title>
    <style>
        .pure-table-wrapper-div {
            overflow-x: scroll;
        }
    
        table.pure-table th:first-child,
        table.pure-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="pure-table-wrapper-div">
        <table class="pure-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>品牌</th>
                    <th>型號</th>
                    <th>隨機字符串</th>
                    <th>說明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>本田</td>
                    <td>雅閣</td>
                    <td>2009-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>這是一段中文說明文字。</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>豐田</td>
                    <td>凱美瑞</td>
                    <td>2012-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>這是一段中文說明文字。</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>現代</td>
                    <td>領動</td>
                    <td>2010-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>這是一段中文說明文字。</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

中文不換行

要去除表格中最后一列中文的換行效果，可以使用 CSS 的 white-space 屬性，將其設置為 nowrap，這樣文字就不會自動換行了。

添加了以下 CSS 樣式：

table.pure-table td:last-child,
table.pure-table th:last-child {
    white-space: nowrap;
}

這樣，最后一列中文就不會自動換行了。其中 table.pure-table td:last-child 和 table.pure-table th:last-child 選擇器用于指定表格中的最后一列單元格，white-space: nowrap; 則是將 white-space 屬性設置為 nowrap，禁止其自動換行。

小結

position: sticky 是 CSS 中的一種定位方式，可以實現元素在滾動時固定在屏幕上，直到其滾動到指定位置。相對于 position: fixed，position: sticky 有以下優點和缺點：

優點：

不會脫離文檔流，因此不會影響其他元素的布局和位置；
可以在頁面滾動到指定位置時自動固定，無需手動計算位置；
可以在滾動到指定位置后自動取消固定，不會一直占據屏幕空間，避免了 position: fixed 的潛在問題；
可以在固定元素上設置 z-index 屬性，與其他元素進行層級控制。

缺點：

兼容性問題：position: sticky 不是所有瀏覽器都支持，特別是在 IE11 及以下版本中不支持；
在某些情況下可能會存在性能問題，尤其是在滾動時固定的元素較多時，可能會導致卡頓和性能下降；
在某些情況下可能會存在滾動到指定位置時出現抖動的問題，需要通過對元素和容器的尺寸、位置等進行調整來解決。

綜上所述，position: sticky 是一種靈活且易用的定位方式，具有很多優點，但在兼容性和性能方面有一些缺點需要注意。如果要在項目中使用 position: sticky，需要在兼容性和性能方面進行綜合考慮，以確保其正常運行和良好的用戶體驗。

【兼容性好】postion 的 absolute 方式【需要指定首列寬度】

核心樣式

        .pure-table-wrapper-div {
            overflow-x: scroll;
            margin-left: 5em;
        }
      
        table.pure-table tr td:first-child,
        table.pure-table tr th:first-child {
            position: absolute;
            width: 5em;
            left: 0;
        }

解釋

這段 CSS 代碼主要是為了實現固定表格首列和橫向滾動效果，并且在表格首列添加了固定的寬度。

首先，.pure-table-wrapper-div 是一個包裹表格的 div 元素，通過設置 overflow-x: scroll，實現了橫向滾動的效果。同時，通過設置 margin-left: 5em，在左側添加了 5em 的空白，使得表格不會緊貼在頁面最左側，美觀性更好。

接著，table.pure-table tr td:first-child 和 table.pure-table tr th:first-child 選擇器用于選中表格中的第一列單元格，使用 position: absolute 將其從文檔流中脫離，并使用 width: 5em 指定其寬度為 5em，然后通過 left: 0 將其固定在表格最左側。

這樣，表格的首列就被固定在了左側，不會隨著表格的滾動而移動，同時也添加了固定的寬度，使得表格整體更加美觀和易讀。

總的來說，這段 CSS 代碼實現了表格的固定首列和橫向滾動效果，同時也為表格首列添加了固定的寬度，提高了表格的可讀性和美觀性。

完整代碼

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

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./purecss@3.0.0.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .pure-table-wrapper-div {
            overflow-x: scroll;
            margin-left: 5em;
        }
      
        table.pure-table tr td:first-child,
        table.pure-table tr th:first-child {
            position: absolute;
            width: 5em;
            left: 0;
        }
    </style>
    <div class="pure-table-wrapper-div">
        <table class="pure-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Make</th>
                    <th>Model</th>
                    <th>隨機數</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2009-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Toyota</td>
                    <td>Camry</td>
                    <td>2012-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Hyundai</td>
                    <td>Elantra</td>
                    <td>2010-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

小結

CSS 中的 position: absolute 定位方式可以讓元素脫離文檔流，并相對于它的最近的非 static 定位祖先元素進行定位。相對于其他定位方式，position: absolute 有以下優點和缺點：

優點：

可以精確控制元素的位置，可以在任何位置放置元素；
可以與其他元素重疊，實現復雜的布局效果；
可以讓元素脫離文檔流，不會影響其他元素的布局和位置；
可以通過設置 z-index 屬性進行層級控制。

缺點：

不會占據原來的空間，可能會導致其他元素填補其位置，影響頁面布局；
定位時需要手動指定位置，不如其他定位方式使用方便；
在某些情況下，可能會出現元素位置計算錯誤的問題，需要仔細調整位置和尺寸。

綜上所述，position: absolute 是一種靈活且強大的定位方式，可以實現很多獨特的布局效果，但需要注意它可能會對頁面布局和元素位置產生影響。在使用時，需要根據具體情況進行綜合考慮，并在保證頁面布局和元素位置正確的前提下，盡可能地利用其優點實現更好的頁面效果。

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

ss

* {
    margin: 0;
    padding: 0;
}
.virtual-scroll-viewport {
    position: relative;
    width: 240px;
    height: 300px;
    margin: 150px auto 0;
    overflow: auto;
    will-change: scroll-position;
    border: 1px solid #aaaaaa;
}
/* 撐開高度 */
.virtual-scroll-spacer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.virtual-scroll-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.virtual-scroll-item {
    height: 50px;
    padding-left: 15px;
    line-height: 50px;
}
.virtual-scroll-item:nth-child(2n) {
    background: #f6f8fa;
}

html

<div class="virtual-scroll-viewport">
    <div class="virtual-scroll-spacer"></div>
    <div class="virtual-scroll-list"></div>
</div>

js

在線咨詢

上一篇：解魔方神器開源：攝像頭看一眼，就能還原全步驟
下一篇：學會這幾個插件，讓你的Notepad++使用起來更絲

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

(首列凍結)通過CSS來實現HTML表格的固定首列和

方法一：sticky 方式

核心樣式

解釋

完整代碼

中文不換行

小結

【兼容性好】postion 的 absolute 方式【需要指定首列寬度】

核心樣式

解釋

完整代碼

小結

完整實例代碼：

ss

html

js

您的項目需求