2. 程式人生 > >bootstrap 表格表頭固定

bootstrap 表格表頭固定

阿新 • • 發佈：2019-02-07

效果

效果是在pc端和移動端能夠使表格的表頭固定，並且在頂部，支援縮放時佈局不亂。

核心技術

利用css的position:fixed 屬性來脫離文件流，達到表頭固定的效果。

程式碼

說明都在程式碼裡面，這裡就不多說了。

<html>
<head>
    <title>使用者表</title>
    <!-- jquery庫-->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
 

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- 可選的 Bootstrap 主題檔案（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
    <script
 
 src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 移動端1：1縮放達到縮放佈局不亂的效果 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        th{
            text-align:center;
        }
 

        table{
            text-align:center;
        }
        .fixedhead{
            position: fixed;
            background: white;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <!-- 僅含表頭的表格，與下面的表格表頭必須一致，然後將此表的css設定為position:fixed，脫離文件流，達到表頭固定的效果-->
    <table class="table table-bordered table-striped fixedhead" id="fixedhead">
        <thead>
        <tr>
            <th>使用者名稱</th>
            <th>密碼</th>
            <th>狀態</th>
        </tr>
        </thead>

    </table>
    <!-- 含有資料的表格，實際上表頭的內容不會被顯示，因為會被上面的表覆蓋，但也不要刪除表頭，因為需要佔位，否則表中第一行資料無法看到。-->
    <table class="table table-bordered table-striped" id="user_table" >
        <thead>
        <tr>
            <th>使用者名稱</th>
            <th>密碼</th>
            <th>狀態</th>
        </tr>
        </thead>
        <tbody id="user_table_tbody">
        <script>
            //固定表頭的寬度，自適應user_table的寬度
            function autoWidth()
            {
                 document.getElementById("fixedhead").style.width =  document.getElementById("user_table").offsetWidth;

            }

            window.onresize = function () {
                //當視窗重繪，重新適應寬度
                autoWidth();
            }
            window.onload = function(){
             //頁面載入完畢，表頭表的自適應寬度
             autoWidth(); 
            }

            //批量生成表格資料
            var tbody = document.getElementById("user_table_tbody");
            var inner = "";
            for (var i=0;i<100;i++) {
                 inner += "<tr>";
                    for (var j=0;j<3;j++) {
                        inner += "<td>" +i+j + "</td>";
                    }
                    inner += "</tr>"
                }
           tbody.innerHTML = inner;


        </script>
        </tbody>
    </table>
</div>
</body>
</html>

相關推薦

bootstrap 表格表頭固定

效果 效果是在pc端和移動端能夠使表格的表頭固定，並且在頂部，支援縮放時佈局不亂。 核心技術 利用css的position:fixed 屬性來脫離文件流，達到表頭固定的效果。 程式碼

關於jsp頁面表格表頭固定，隨著下拉條表頭移動

在專案中碰見jsp頁面遍歷資料過多，下拉後看不見表頭，如果用easyUi就不存在固定表頭問題了。 如果是單純的table，遍歷，那麼我們可以引用bootstrap中的滾動監聽來控制。 在頁面引入  <link rel="stylesheet" href="https

bootstrap table 表頭固定 、凍結列、橫向縱向滾動條

前提：引入對應的js,css<link rel="stylesheet" type="text/css" href="/kaoqin/js/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" ty

bootstrap table 實現固定懸浮table 表頭並可以水平滾動

app 實現 question get net width class pan eight 在開發項目中，需要將表格頭部固定，而且表格大多數情況下是會水平滾動的。項目的css框架是bootstrap 3，故也可以叫做bootstrap table。 需要實現的是：表格頭部

vue 表格樹 固定表頭

參考網上黃龍的表格樹進行完善，並新增固定表頭等的功能，目前是在iview的專案中實現，如果想在element中實現的話修改對應的元素標籤及相關寫法即可。 <template> <div ref="table" :style="{width:treeGridWidth}" class=

bootstrap 表格設定列固定寬度以及內容自動換行的CSS

<style type="text/css"> #contentTable{ table-layout:fixed; /* bootstrap-table設定colmuns中某列的寬度無效時，需要給整個表設定css屬性 */ word-break:break-all;

bootstrap的table表頭固定tbody滾動

<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" type

vue表格實現固定表頭首列

前言 最近在做vue移動端專案，需要做一個可以固定表頭首列的表格，而且由於一些原因不能使用任何UI外掛，網上找了很久也沒什麼好方法，所以在解決了問題之後，寫下了這篇文章供後來人參考，文章有什麼錯漏的問題歡迎評論交流。 效果 思路 要實現固定首行首列 除了使用各種UI框架外掛外，那就是自己用原生寫啦

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

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

table表頭和首列的表格固定-JQuery、js實現的Table表頭固定

這個是最簡單的方法，基於jQuery的解決方案,引入一個兩個js就可以解決，當然也有使用css， position: sticky，這個我下一章節會講它的優缺點，當然為了凸顯jQuery的優點， 我就說話使用css的缺點： 1.固定表頭，和首列需要額外

建立 表頭固定 的表格 table fixed header

1:純html 實現 使用2個table 來做，第一個table 用來做表頭【thead】，第二個table 用來做表體【tbody】 為了保證2個表的列的寬度是一致的，需要使用<colgroup> 標籤。 程式碼如下： 完整程式碼如下： 1 &

表格表頭thead固定，tbody滾動實現樣式

設定樣式如下 .table tbody {    display: block;    height: 620px;    overflow-y: auto;  }.table thead, .tabl

使用EXCEL 2007製作表格時，在下拉過程中使表頭固定不動 凍結窗格（轉載）

以前總是看到其他人的EXCEL的第一行，或者第一列在拖動是總是保持不變，這給瀏覽者很大的方便。今天沒事也自己動作試了一下，其實很是很簡單的，呵呵！首先我們開啟一個以前的EXCEL，如圖：現在我們拖動這個表格，然後第一行就看不見了，這樣，如果我相知 D9 這個單元格的內容是代表什麼 我們 把表格拖回第一行才能看

設計表頭固定並且列寬可調整的Table表格

<html> <head> <title>table表頭固定以及列寬可調</title> <meta charset="utf-8"> <style> th { width:

HTML table 表格 thead 表頭固定，tbody 滾動

第一種方式實現 使用 css 樣式設定thead 和 tbody 【 推薦方式 】 #tableid>thead>tr{ display: table;

純css固定表格表頭，表頭與表格對齊，非常實用

//控制表格滑動      table tbody {              display:block;              height:450px;              overflow-y:scroll;         }  //固定表頭    

bootstrap-table固定表頭固定列

1.引入 　　bootstrap依賴於jquery 　　bootstrap-table依賴於bootstrap,所以都需要引入 2. bootstrap-table有兩種方式，html、js 1 2 3 4 5

表頭固定的前提下表格添加縱向滾動條

表格 動態 overflow borde col float 技術 上下 height 　　有時候在不分頁且數據多的時候就需要滾動條，或者說是下拉加載的時候也需要滾動條，但是希望在滾動的時候數據的表頭固定便於理解表體。 如下: <!DOCTYPE htm

bootstrap-表格-響應式表格

bootstrap-表格-響應式表格1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" co

bootstrap表格

水平滾動 arr ont nal 狀態 屏幕 tool 普通 copy 前面的話 　　Bootstrap為我們提供了非常好看且易用的表格樣式，利用Boostrap可以快速的創建出不同樣式的表格，本文將詳細介紹Boostrap表格 基本實例 　　Boostrap將表格&l