css實現table鎖定表頭

阿新 • • 發佈：2019-01-03

在做專案中，碰到表格資料全部載入，不要分頁，就需要鎖定表頭的業務。自己也上網搜了一些資料，
1.css+html實現
一般的思路就是兩個table拼接，不過問題是上下表單可能對不齊
2.js實現
一般的思路是重新建立表頭，表頭浮動
在這裡css+html實現：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv 
="Content-Type" content="text/html; charset=UTF-8">
<title>css+html實現固定表頭</title>
<style type="text/css">
    #scrollTable {
        width:701px;
        border: 1px solid #EB8;/*table沒有外圍的border，只有內部的td或th有border*/
        background: #FF8C00;
    }
    #scrollTable table {
        border-collapse 
:collapse; /*統一設定兩個table為細線表格*/
    }
    /*表頭 div的第一個子元素**/
    #scrollTable table.thead{
        width:100%;
    }
    /*表頭*/
    #scrollTable table.thead th{
        border: 1px solid #EB8;
        border-right:#C96;
        color:#fff;
        background: #FF8C00;/*亮桔黃色*/
    }

    /*能帶滾動條的表身*/
    /*div的第二個子元素*/ 

    #scrollTable div{
        width:100%;
        height:200px;
        overflow:auto;/*必需*/
        scrollbar-face-color:#EB8;/*那三個小矩形的背景色*/
        scrollbar-base-color:#ece9d8;/*那三個小矩形的前景色*/
        scrollbar-arrow-color:#FF8C00;/*上下按鈕裡三角箭頭的顏色*/
        scrollbar-track-color:#ece9d8;/*滾動條的那個活動塊所在的矩形的背景色*/
        scrollbar-highlight-color:#800040;/*那三個小矩形左上padding的顏色*/
        scrollbar-shadow-color:#800040;/*那三個小矩形右下padding的顏色*/
        scrollbar-3dlight-color: #EB8;/*那三個小矩形左上border的顏色*/
        scrollbar-darkshadow-Color:#EB8;/*那三個小矩形右下border的顏色*/
    }

    /*能帶滾動條的表身的正體*/
    #scrollTable table.tbody{
        width:100%;
        border: 1px solid #C96;
        border-right:#B74;
        color:#666666;
        background: #ECE9D8;
    }

    /*能帶滾動條的表身的格子*/
    #scrollTable table.tbody td{
        border:1px solid #C96;
    }
</style>

</head>
<body>

<div id="scrollTable">
    <table class="thead">
        <col width="170px"></col> 
        <col width="170px"></col> 
        <col width="170px"></col>
        <col></col>
        <tbody>
            <tr>
                <th>名稱</th>
                <th>語法</th>
                <th>說明</th>
                <th>例子</th>
            </tr>
      </tbody>
    </table>
    <div>
      <table class="tbody"> 
      <col width="170px"></col> <col width="170px"></col> <col width="170px"></col><col></col>
        <tbody>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
            <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            </tr>
        </tbody>
      </table>
    </div>
</div>
</body>
</html>

頁面效果：
這裡寫圖片描述

css實現table鎖定表頭

在做專案中，碰到表格資料全部載入，不要分頁，就需要鎖定表頭的業務。自己也上網搜了一些資料， 1.css+html實現一般的思路就是兩個table拼接，不過問題是上下表單可能

CSS實現table固定寬度，超過單元格部分內容省略

效果 org lips cell 間距 tex round nal 長度 <table>單元格的寬度是根據內容的大小自適應的，沒有內容的地方就擠到了一起。需要固定表格寬度和每一列的寬度。 table-layout:fixed 在固定表格布局中，水平布局僅取決

簡單實現Table固定表頭

下面是本人寫的很簡單的固定TABLE頭部的外掛，他使用動畫來幫你固定表頭，從而在保持表頭格式的同時，不會損耗太多效能有用就給個start唄介紹 eleFixed是一款非常簡單的使用動畫來固定元素的外掛（最常見的作用就是固定table的thead）

VUE 自定義表頭實現table的過濾功能

html程式碼下面是table <el-table-column v-for="(data,index) in mydata" //下面呼叫的是自定義的函式

JS(JQ)實現table表格固定表頭且表頭可以隨橫向滾動而滾動

先看一張效果圖思路： 1、頭部用一個table並用一個div包裹著，表格的具體內容用一個table 2、頭部外面的div用positon: relative相對定位 3、獲取整個表格的高度 4、獲取表格的dom（或者包裹著表格的dom）距離頁面頂部的距離 offset

CSS實現表格表頭（thead）固定，內容（tbody）滾動

前言最近在寫一個專案，然後要實現表頭固定，tbody內容滾動的效果，該專案中沒有使用任何外掛，並且表格列數蠻多的，剛開始實現起來遇到各種問題，感覺蠻複雜的，後來找到了一種利用transform的方法實現，效果還不錯，請看程式碼~~~~~~————程式碼————<!DO

css 利用table-cell實現居中的方法

通過display轉化成為表格的形式，再採用垂直居中的方法得到垂直居中的效果。display:table 此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。 display:table-cell 此元素會作為一個表格單元格顯示（類

el-table多表頭-動態列-在後臺管理系統許可權分配中的實現

原介面bootstrap+jQuery實現新介面vue+element 利用element的表格實現,目前程式碼展示沒有原來的PHP直接呈現的時候快,原因應該是頁面一次性展示元素太多造成的待優化程式碼 <!--有部門許可權--------------

純css實現select下拉框並排顯示

code 同時 eight spl one 背景色不起作用表單 lang <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

css實現自適應正方形的方法

固定如果 spa size 一個 idt width 正方 pad 頁面布局中，我們經常需要用百分比來實現寬度自適應，但是如果這時候高度要跟寬度呈固定比例變化，該怎麽辦呢？很簡單，我們可以利用元素的padding或margin的百分比值是參照寬度的這一特性來實現，即如

css+div table

xmlns body color 表格 oat size 衣服 text itl div+css table表格樣式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

jqury+css實現可彈出伸縮層

頁面布局 csdn 之前 div html jsb ava nts tex 1、使用可彈出伸縮窗調整了之前的頁面布局，使用這樣的布局使整個界面看起來更加清爽也更簡潔2、以上圖左側面板為例，實現比較簡單，僅僅需了解html和css布局就大致差點兒相同了html代碼：CSS：

css控制table的td寬度

一行 bsp clas class 即使 table 管理服務器 tle overflow 今天發現即使設置table的td、th寬度，仍是不管用，是根據table的td的內容來適應寬度，導致其他的th、td丟失。下圖就是瀏覽器渲染的table，導致缺失“端口”這一列，

DIV+CSS實現兩邊固定寬度,中間自適應寬度

round gin itl lan enter color css 寬度自適應 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&g

css實現梯形（各種形狀）的網頁布局——transform的妙用

建議 logs 網頁布局 mar 500px 實現 hidden .html order 　　　　在各式各樣的網頁中，經常會看到形狀特別的布局，比如說下面的這種排版方式：　　這種視覺上的效果，體驗十分好。那麽他是如何來實現的呢

css實現的loading動畫

nbsp city display tip nim fill abs utf-8 title 第一種： <!DOCTYPE html> <html> <head> <title>loading</t

盤點8種CSS實現垂直居中水平居中的絕對定位居中技術

其他 margin phone ie10 logs html mar over 防止 1.絕對定位居中（Absolute Centering）技術　　我們經常用margin:0 auto;來實現水平居中，而一直認為margin:auto;不能實現垂直居中......實際上

css實現選項卡

pan splay ora eight name checked wid overflow block <style> *{ margin: 0; padding: 0;

css實現文本縮略顯示

.net blog cnblogs 換行 span cal size 實現 flow 轉載自http://blog.csdn.net/mushui0633/article/details/65685655 單行：對應的css中加入 overflow:hidden;//超

CSS實現禁止文字選中

精確文本 ectable 文字 ron scale dev imu -o E10平臺預覽第四版中包含了對 CSS3 新屬性 -ms-user-select 的支持，Web 開發人員可以利用這一新屬性輕松精確的控制用戶可以在網站上選擇哪些文本。 user-select：no

css實現table鎖定表頭

相關推薦