(首列凍結)通過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 是一種靈活且強大的定位方式，可以實現很多獨特的布局效果，但需要注意它可能會對頁面布局和元素位置產生影響。在使用時，需要根據具體情況進行綜合考慮，并在保證頁面布局和元素位置正確的前提下，盡可能地利用其優點實現更好的頁面效果。

SS層疊樣式表（Cascading Style Sheets）是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。

在研究前端性能時，我們是希望頁面能逐步地加載的，也就是說我們希望瀏覽器能夠盡快顯示內容，而不是等到所有頁面加載完成后才開始顯示內容，這對于有很多內容的頁面以及Internet連接慢的用戶來說尤其重要。也即是為用戶提供可視化的反饋的重要性，在可用性的概念中詳細的闡述了從進度指示器的角度強調可視化反饋的重要性。

進度指示器有以下三個方面的優勢：

第一：可以讓用戶知道系統沒有崩潰，只是正在為他或她解決問題；

第二：它們指出了用戶大概還需要等多久可以加載完成，以便用戶能夠在漫長的等待中做些其它的事情；

第三：能給用戶提供一些可以看的東西，使用得等待不再是那么無聊。

當然在我們討論前端性能時，HTML頁面就是進度指示器，當瀏覽器逐步地加載頁面時，頁頭、導航欄、頂部LOGO等，這些都會為等待頁廁所用戶提供視覺反饋，這樣可以改善整體用戶體驗。

那么如果將樣式放在文檔底部是，就會禁止瀏覽器進行漸進式呈現，這樣會瀏覽器會阻止渲染，這樣用戶會停留在空白頁面，我們將其稱之為“白屏”。為了避免“白屏”，應該將樣式放在文檔頂部的HEAD中，經過這樣修改后的示例網站稱之為“CSS at the Top”，這樣不管頁面是如何加載的，頁面都會逐步呈現。

次，我們來講解應用 CSS 來裝飾表格。

如何制作一個表格，我們在HTML課程中已經學習過了。現在，我們通過樣式，讓表格變得更加美觀易用。

首先來學習如何定義表格邊框。

要在CSS中指定表格的邊框，可以使用 border 屬性。我們來舉個例子。

創建 tables.html 文件和 tables-style.css 文件。在 html 里構建基礎代碼，引入外部樣式。

在 body 里編寫 emmet 命令：table>(tr>th*2)+(tr>td*2)*3，填入一些文本。

HTML
<table>
    <tr>
      <th>千鋒名師</th>
      <th>最新作品</th>
    </tr>
    <tr>
      <td>浠浠呀</td>
      <td>《HTML+CSS前端入門》</td>
    </tr>
    <tr>
      <td>陸榮濤</td>
      <td>《Vite學習指南》</td>
    </tr>
    <tr>
      <td>Kerwin</td>
      <td>《Vue2+Vue3全套教程》</td>
    </tr>
  </table>

在瀏覽器里預覽效果：表格的結構有了，還沒有邊框。大家還記得如何通過 html 屬性定義邊框嗎？可以評論上告訴我。

現在，我們通過樣式來給表格添加邊框。定義群組選擇器 table, th, td，聲明樣式：border: 1px solid。

再看效果，表格線出現了，可是外觀上看，線條有點粗。是因為 table、th和td元素都有獨立的邊框。

CSS
table, th, td {
  border: 1px solid;
}

可以應用 border-collapse 屬性，把表格的邊框折疊成一個單一的邊框。

回到 CSS，再給 table 元素聲明樣式：border-collapse: collapse。

此時，表格線變細了。

CSS
table {
  border-collapse: collapse;
}

當前表格看起來很小，如果我們需要一個橫跨整個屏幕的表格，該如何實現呢？

回到CSS，再給 table 添加樣式 width: 100%。

再看一下效果，表格橫向撐滿了整個屏幕。

接下來，我們來定義表格的寬度和高度。

width 和 height 屬性用來定義表格的寬度和高度。我們來實驗一下。

將 table 的 width 屬性修改為 50%，再給 th 聲明樣式 height: 70px。

我們看，表格寬度縮小了一半，同時表頭的高度也變大到 70px 了。

接下來，我們來設置表格的對齊方式。

text-align 屬性用來設置 th 或 td 中內容的水平對齊方式，如居左、居右或居中對齊。默認情況下，th 元素的內容是居中對齊的，td 元素的內容是左對齊的。要使 td 元素的內容也居中對齊，可以使用text-align: center。舉個例子：

回到CSS，給 td 添加樣式：text-align: center。

此時，全部 td 里的內容在單元格里水平居中顯示了。

要使內容左對齊，可以使用 text-align: left 屬性。

比如將 th 元素的對齊方式改為左對齊。

CSS
th {
  height: 70px;
  text-align: left;
}

vertical-align 屬性用來設置 th 或 td 中內容的垂直對齊方式。如頂部對齊、底部對齊或中間對齊。默認情況下，對于 th 和 td 元素，表格中內容的垂直對齊方式是中間對齊。舉個例子：

回到 CSS，給 td 添加樣式：height: 50px，vertical-align: bottom。

我們看， td 單元格里的內容垂直底部對齊了。

接下來，給表格添加內填充、水平分隔線、鼠標滑過高亮及顏色等樣式。

要控制表格中邊框和內容之間的空間，可以給 td 和 th 元素設置 padding 屬性。

回到 CSS，先注釋掉 th 和 td 的樣式。定義選擇器 th, td，聲明樣式：padding: 15px，text-align: left。

CSS
th, td {
  padding: 15px;
  text-align: left;
}

看一下效果，內容和邊框線之間就具有了 15px 的填充。

接下來通過給 th 和 td 添加 border-bottom 屬性，實現表格的水平分隔線效果。

注釋掉原有的 border 屬性，給 th 和 td 添加樣式：border-bottom: 1px solid #ddd。

CSS
table, th, td {
  /* border: 1px solid; */
}
th, td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

我們看，水平分隔線的表格效果就實現了。

在 tr 上使用 :hover 選擇器，在鼠標移過時突出顯示表格的行。

回到CSS，定義選擇器 tr:hover，聲明樣式：background-color: coral。kerou

當鼠標滑過每一行時，當前行就高亮顯示了。

我們也可以專門給某一行添加背景色，比如給 th 添加一個綠色背景。

再單獨給 th 定義樣式：background-color: #04AA6D，color: white;

CSS
th {
  background-color: #04AA6D;
  color: white;
}

這樣，通過給 th 添加背景色，使表頭的顯示更加醒目了。

本文配套教程鏈：https://www.bilibili.com/video/BV1oU4y1278g?p=101

在線咨詢

上一篇：HTML5干貨分享，入門者值得一看
下一篇：HTML常用全部代碼，你懂，你不想成功都難

您的項目需求

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

整合營銷服務商

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

方法一：sticky 方式

核心樣式

解釋

完整代碼

中文不換行

小結

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

核心樣式

解釋

完整代碼

小結

您的項目需求