ฉันพยายามสร้างตารางที่มีหัวเรื่องคงที่และเนื้อหาที่เลื่อนได้โดยใช้ตาราง bootstrap 3 น่าเสียดายที่โซลูชันที่ฉันพบไม่สามารถทำงานร่วมกับ bootstrap หรือทำให้สไตล์ยุ่งเหยิง

ที่นี่มีตาราง bootstrap ที่เรียบง่าย แต่ด้วยเหตุผลบางอย่างสำหรับฉันไม่ทราบความสูงของร่างกายที่ไม่ใช่ 10px

height: 10px !important; overflow: scroll;

ตัวอย่าง:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody style="height: 10px !important; overflow: scroll; ">
    <tr>
        <td class="filterable-cell">111 Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>

หัวตารางคงที่ - CSS เท่านั้น

เพียงองค์ประกอบposition: sticky; top: 0;ของคุณ (Chrome, FF, Edge)th

.tableFixHead          { overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

TH การแก้ไขปัญหาชายแดน

เนื่องจากborderไม่สามารถวาดได้อย่างถูกต้องในTHองค์ประกอบที่แปลเพื่อสร้างและแสดง"เส้นขอบ"ใช้box-shadowคุณสมบัติ:

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}

.tableFixHead          { overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

หัวตารางคงที่ - ใช้ JS (IE)

คุณสามารถใช้บิตของ JS และtranslateYthองค์ประกอบ

ตัวอย่าง jQuery

var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
  $th.css('transform', 'translateY('+ this.scrollTop +'px)');
});

.tableFixHead { overflow-y: auto; height: 100px; }

/* Just common table stuff. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>TH 1</th><th>TH 2</th></tr>
    </thead>
    <tbody>
      <tr><td>A1</td><td>A2</td></tr>
      <tr><td>B1</td><td>B2</td></tr>
      <tr><td>C1</td><td>C2</td></tr>
      <tr><td>D1</td><td>D2</td></tr>
      <tr><td>E1</td><td>E2</td></tr>
    </tbody>
  </table>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

หรือ ES6 ธรรมดาหากคุณต้องการ (ไม่จำเป็นต้องใช้ jQuery):

// Fix table head
function tableFixHead (e) {
    const el = e.target,
          sT = el.scrollTop;
    el.querySelectorAll("thead th").forEach(th => 
      th.style.transform = `translateY(${sT}px)`
    );
}
document.querySelectorAll(".tableFixHead").forEach(el => 
    el.addEventListener("scroll", tableFixHead)
);

มีแนวโน้มว่าคุณจะได้รับหลายตารางในหนึ่งหน้าดังนั้นคุณต้องมีคลาส CSS โปรดหาวิธีแก้ไข @ giulio สำหรับวิธีการนั้น

เพียงประกาศในตาราง:

<table class="table table-striped header-fixed"></table>

CSS

.header-fixed {
    width: 100% 
}

.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
    display: block;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
    width: 20%;
    float: left;
}

โปรดทราบว่าการใช้งานปัจจุบันเหมาะสมกับห้าคอลัมน์เท่านั้น หากคุณต้องการตัวเลขอื่นให้เปลี่ยนพารามิเตอร์widthจาก20%เป็น * 100% / number_of_columns *

นี่คือวิธีการแก้ปัญหาการทำงาน:

table {
    width: 100%;
}

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
        <tr>
            <td class="filterable-cell">Ford</td>
            <td class="filterable-cell">Escort</td>
            <td class="filterable-cell">Blue</td>
            <td class="filterable-cell">2000</td>
        </tr>
    </tbody>
</table>

เชื่อมโยงไปยังjsfiddle

ปรับปรุง

สำหรับไลบรารี่ที่ ใหม่กว่าและยังคงรักษาไว้ให้ลองjquery.floatThead (ตามที่ระบุไว้โดย Bob Jordan ในความคิดเห็น)แทน

คำตอบเก่า

นี่เป็นคำตอบที่เก่ามากห้องสมุดที่กล่าวถึงด้านล่างไม่ได้รับการดูแลรักษาอีกต่อไป

ฉันใช้StickyTableHeadersบน GitHub และมันใช้งานได้อย่างมีเสน่ห์!

ฉันต้องเพิ่ม CSS นี้เพื่อให้ส่วนหัวไม่โปร่งใสแม้ว่า

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}

ไม่จำเป็นต้องห่อใน div ...

CSS :

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Bootply : http://www.bootply.com/AgI8LpDugl

มันง่ายกว่าด้วย css

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }

มางานปาร์ตี้สาย (เรื่องราวในชีวิตของฉัน) แต่เนื่องจากนี่เป็นผลลัพธ์แรกใน google และไม่มีสิ่งใดที่ทำให้ฉันทำงานได้นี่คือรหัสของฉัน

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}

ในสายตาของฉันซึ่งเป็นหนึ่งในปลั๊กอินที่ดีที่สุดสำหรับ jQuery เป็นDataTables

นอกจากนี้ยังมีส่วนขยายสำหรับส่วนหัวคงที่และใช้งานได้ง่ายมาก

นำมาจากเว็บไซต์ของพวกเขา:

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
  </tbody>
</table>

JavaScript:

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

แต่สิ่งที่ง่ายที่สุดที่คุณสามารถมีได้สำหรับการเลื่อน<tbody>คือ:

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});

ตำแหน่งเพิ่มเติมล่าสุด: 'เหนียว' จะเป็นทางออกที่ง่ายที่สุดที่นี่

.outer{
    overflow-y: auto;
    height:100px;
    }

.outer table{
    width: 100%;
    table-layout: fixed; 
    border : 1px solid black;
    border-spacing: 1px;
}

.outer table th {
        text-align: left;
        top:0;
        position: sticky;
        background-color: white;  
}

 <div class = "outer">
 <table>
             <tr >
              <th>col1</th>
              <th>col2</th>
              <th>col3</th>
              <th>col4</th>
               <th>col5</th>
             <tr>
                       
            <tr >
              <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
               <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
 </table>
 </div>

table {
    overflow-y: auto;
    height: 50vh;     /* !!!  HEIGHT MUST BE IN [ vh ] !!! */
}

thead th {
    position: sticky;
    top: 0;
}

   <table>
      <thead>
        <tr><th>TH 1</th><th>TH 2</th></tr>
      </thead>
      <tbody>
        <tr><td>A1</td><td>A2</td></tr>
        <tr><td>B1</td><td>B2</td></tr>
        <tr><td>C1</td><td>C2</td></tr>
        <tr><td>D1</td><td>D2</td></tr>
        <tr><td>E1</td><td>E2</td></tr>
        <tr><td>F1</td><td>F2</td></tr>
        <tr><td>G1</td><td>G2</td></tr>
        <tr><td>H1</td><td>H2</td></tr>
        <tr><td>I1</td><td>I2</td></tr>
        <tr><td>J1</td><td>J2</td></tr>
        <tr><td>K1</td><td>K2</td></tr>
        <tr><td>L1</td><td>L2</td></tr>
        <tr><td>M1</td><td>M2</td></tr>
        <tr><td>N1</td><td>N2</td></tr>
        <tr><td>O1</td><td>O2</td></tr>
        <tr><td>P1</td><td>P2</td></tr>
        <tr><td>Q1</td><td>Q2</td></tr>
        <tr><td>R1</td><td>R2</td></tr>
        <tr><td>S1</td><td>S2</td></tr>
        <tr><td>T1</td><td>T2</td></tr>
        <tr><td>U1</td><td>U2</td></tr>
        <tr><td>V1</td><td>V2</td></tr>
        <tr><td>W1</td><td>W2</td></tr>
        <tr><td>X1</td><td>X2</td></tr>
        <tr><td>Y1</td><td>Y2</td></tr>
        <tr><td>Z1</td><td>Z2</td></tr>
      </tbody>
    </table>

คุณไม่ต้องการ js สิ่งสำคัญคือการตั้งค่าความสูงของตารางใน [ vh ]

ฉันมีปัญหามากมายในการทำให้ห้องสมุดหัวกระดาษเหนียวทำงาน เมื่อทำการค้นหาเพิ่มเติมอีกเล็กน้อยฉันพบว่าfloatTheadเป็นทางเลือกที่ได้รับการบำรุงรักษาอย่างแข็งขันด้วยการอัปเดตล่าสุดและเอกสารที่ดีกว่า

คุณควรลองด้วย "display: block;" ถึง tbody เพราะตอนนี้มันเป็นบล็อกอินไลน์และเพื่อกำหนดความสูงองค์ประกอบควรจะเป็น "บล็อก"

ขั้นแรกให้เพิ่มมาร์กอัพสำหรับตาราง bootstrap ที่นี่ฉันสร้างตารางที่มีแถบ แต่ยังเพิ่มคลาสของตารางที่กำหนดเอง.table-scrollซึ่งเพิ่มแถบเลื่อนแนวตั้งลงในตารางและทำให้ส่วนหัวของตารางคงที่ในขณะที่เลื่อนลง

<div class="col-xs-8 col-xs-offset-2 well">
    <table class="table table-scroll table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>County</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Andrew</td>
                <td>Jackson</td>
                <td>Washington</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Thomas</td>
                <td>Marion</td>
                <td>Jackson</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Benjamin</td>
                <td>Warren</td>
                <td>Lincoln</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Grant</td>
                <td>Wayne</td>
                <td>Union</td>
            </tr>
            <tr>
                <td>5</td>
                <td>John</td>
                <td>Adams</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Morgan</td>
                <td>Lee</td>
                <td>Lake</td>
            </tr>
            <tr>
                <td>7</td>
                <td>John</td>
                <td>Henry</td>
                <td>Brown</td>
            </tr>
            <tr>
                <td>8</td>
                <td>William</td>
                <td>Jacob</td>
                <td>Orange</td>
            </tr>
            <tr>
                <td>9</td>
                <td>Kelly</td>
                <td>Davidson</td>
                <td>Taylor</td>
            </tr>
            <tr>
                <td>10</td>
                <td>Colleen</td>
                <td>Hurst</td>
                <td>Randolph</td>
            </tr>
            <tr>
                <td>11</td>
                <td>Rhona</td>
                <td>Herrod</td>
                <td>Cumberland</td>
            </tr>
            <tr>
                <td>12</td>
                <td>Jane</td>
                <td>Paul</td>
                <td>Marshall</td>
            </tr>
            <tr>
                <td>13</td>
                <td>Ashton</td>
                <td>Fox</td>
                <td>Calhoun</td>
            </tr>
            <tr>
                <td>14</td>
                <td>Garrett</td>
                <td>John</td>
                <td>Madison</td>
            </tr>
            <tr>
                <td>15</td>
                <td>Fredie</td>
                <td>Winters</td>
                <td>Washington</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.table-scroll tbody {
    position: absolute;
    overflow-y: scroll;
    height: 250px;
}

.table-scroll tr {
    width: 100%;
    table-layout: fixed;
    display: inline-table;
}

.table-scroll thead > tr > th {
    border: none;
}

ฉันใช้ปลั๊กอิน jQuery floatThead ( https://mkoryak.github.io/floatThead/#intro )

docs บอกว่ามันใช้งานได้กับตาราง Bootstrap 3 และฉันสามารถบอกได้ว่ามันใช้งานได้กับตาราง Bootstrap 4 ที่มีหรือไม่มีตัวช่วยตอบตาราง

การใช้ปลั๊กอินนั้นง่ายมากเช่นนี้:

HTML (มาร์กอัพตาราง bootstrap วานิลลา)

<div class="table-responsive">
   <table id="myTable" class="table table-striped">
        <thead>...</thead>
        <tbody>...</tbody>
   </table>
</div>

การเริ่มต้นปลั๊กอิน:

$(document).ready(function() {
    var tbl=$('#myTable');
    tbl.floatThead({
        responsiveContainer: function(tbl) {
            return tbl.closest('.table-responsive');
        }
    });
});

ข้อจำกัดความรับผิดชอบฉบับเต็ม: ฉันไม่ได้เกี่ยวข้องกับปลั๊กอิน แต่อย่างใด ฉันพบมันหลังจากหลายชั่วโมงของการลองวิธีแก้ไขปัญหาอื่น ๆ มากมายที่โพสต์ที่นี่และที่อื่น ๆ

สำหรับสิ่งที่คุ้มค่าในตอนนี้: ฉันโพสต์วิธีแก้ปัญหาไปยังการเลื่อนตารางน้องสาวด้ายด้วย HTML และ CSSซึ่ง

• ใช้สองตาราง (หนึ่งสำหรับส่วนหัวเท่านั้นหนึ่งสำหรับทั้งหมด - เค้าโครงโดยเบราว์เซอร์)
• หลังจากการจัดวางให้ปรับตาราง (ส่วนหัวเท่านั้น) เป็นความกว้างของตารางที่ต่ำกว่า
• ซ่อน ( visibilityไม่ใช่display) ส่วนหัวของตารางด้านล่างและทำให้ตารางด้านล่างเลื่อนได้โดยใช้ div

การแก้ปัญหานี้ไม่เชื่อเรื่องพระเจ้ากับสไตล์ / กรอบงานใด ๆ ที่ใช้ - ดังนั้นมันอาจมีประโยชน์ที่นี่เช่นกัน ...

คำอธิบายแบบยาวอยู่ในการเลื่อนตารางด้วย HTML และ CSS / รหัสยังอยู่ในปากกานี้: https://codepen.io/sebredhh/pen/QmJvKy

สำหรับตารางที่มีความสูงเต็ม (หน้าเลื่อนไม่ใช่ตาราง)

หมายเหตุ: ฉันย้ายทั้งหมด <thead>...</thead> beauseในกรณีของฉันฉันมีสองแถว (หัวเรื่องและตัวกรอง)

ด้วย JS (jQuery)

$( function() {

            let marginTop = 0; // Add margin if the page has a top nav-bar
            let $thead = $('.table-fixed-head').find('thead');
            let offset = $thead.first().offset().top - marginTop;
            let lastPos = 0;

            $(window).on('scroll', function () {

                if ( window.scrollY > offset )
                {
                    if ( lastPos === 0 )
                    {
                        // Add a class for styling
                        $thead.addClass('floating-header');
                    }

                    lastPos = window.scrollY - offset;
                    $thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
                }
                else if ( lastPos !== 0 )
                {
                    lastPos = 0;
                    $thead.removeClass('floating-header');
                    $thead.css('transform', 'translateY(' + 0 + 'px)');
                }
            });
});

CSS (เพียงเพื่อจัดแต่งทรงผม)

 thead.floating-header>tr>th {
       background-color: #efefef;
 }

thead.floating-header>tr:last-child>th {
       border-bottom: 1px solid #aaa;
}

ตอนนี้เบราว์เซอร์“ all” รองรับ ES6 ฉันได้รวมคำแนะนำต่าง ๆ ข้างต้นไว้ในคลาส JavaScript ที่ใช้ตารางเป็นอาร์กิวเมนต์และทำให้สามารถเลื่อนเนื้อหาได้ ช่วยให้โครงร่างของเบราว์เซอร์กำหนดส่วนหัวและความกว้างของเซลล์และจากนั้นทำให้ความกว้างของคอลัมน์ตรงกันกัน

ความสูงของตารางสามารถตั้งค่าได้อย่างชัดเจนหรือทำเพื่อเติมส่วนที่เหลือของหน้าต่างเบราว์เซอร์และให้การเรียกกลับสำหรับเหตุการณ์เช่นการปรับขนาด viewport และ / หรือdetailsองค์ประกอบการเปิดหรือปิดองค์ประกอบ

การสนับสนุนส่วนหัวแบบหลายแถวพร้อมใช้งานและมีประสิทธิภาพเป็นพิเศษหากตารางใช้แอตทริบิวต์ id / headers สำหรับการเข้าถึงตามที่ระบุในแนวทาง WCACซึ่งไม่เป็นข้อกำหนดที่ยากเท่าที่ควร

รหัสไม่ได้ขึ้นอยู่กับไลบรารีใด ๆ แต่จะเล่นกับพวกเขาอย่างดีหากพวกเขาถูกใช้งาน (ทดสอบบนหน้าเว็บที่ใช้ JQuery)

รหัสและการใช้งานตัวอย่างที่มีอยู่บน Github

คุณสามารถวางสอง div โดยที่ส่วนที่ 1 (ส่วนหัว) จะมีแถบเลื่อนโปร่งใสและ div ที่สองจะมีข้อมูลพร้อมแถบเลื่อนที่มองเห็น / อัตโนมัติ ตัวอย่างมีข้อมูลโค้ดเชิงมุมสำหรับการวนลูปผ่านข้อมูล

รหัสด้านล่างทำงานให้ฉัน -

<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
    <div class="row">
        <div class="col-lg-3 col-xs-3"><strong>{{col1}}</strong></div>
        <div class="col-lg-6 col-xs-6"><strong>{{col2}}</strong></div>
        <div class="col-lg-3 col-xs-3"><strong>{{col3}}</strong></div>
    </div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
    <div>
        <div class="row" ng-repeat="row in rows">
            <div class="col-lg-3 col-xs-3">{{row.col1}}</div>
            <div class="col-lg-6 col-xs-6">{{row.col2}}</div>
            <div class="col-lg-3 col-xs-3">{{row.col3}}</div>
        </div>
    </div>
</div>

สไตล์เพิ่มเติมเพื่อซ่อนแถบเลื่อนส่วนหัว -

<style>
        #transparentScrollbarDiv::-webkit-scrollbar {
            width: inherit;
        }

        /* this targets the default scrollbar (compulsory) */

        #transparentScrollbarDiv::-webkit-scrollbar-track {
            background-color: transparent;
        }

        /* the new scrollbar will have a flat appearance with the set background color */

        #transparentScrollbarDiv::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        /* this will style the thumb, ignoring the track */

        #transparentScrollbarDiv::-webkit-scrollbar-button {
            background-color: transparent;
        }

        /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

        #transparentScrollbarDiv::-webkit-scrollbar-corner {
            background-color: transparent;
        }

        /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
    </style>

นี่คือปากกา copen ของฉันเกี่ยวกับวิธีสร้างส่วนหัวของตารางคงที่พร้อมแถวและคอลัมน์ที่เลื่อน คอลัมน์ยังคงเป็นความกว้างคงที่http://codepen.io/abhilashn/pen/GraJyp

<!-- Listing table -->
        <div class="row">
            <div class="col-sm-12">
                <div class="cust-table-cont">
                <div class="table-responsive">
                  <table border="0" class="table cust-table"> 
                    <thead>
                        <tr style="">
                          <th style="width:80px;">#</th> 
                          <th style="width:150px;" class="text-center"><li class="fa fa-gear"></li></th>  
                          <th style="width:250px;">Title</th>  
                          <th style="width:200px;">Company</th> 
                          <th style="width:100px;">Priority</th> 
                          <th style="width:120px;">Type</th>     
                          <th style="width:150px;">Assigned to</th> 
                          <th style="width:120px;">Status</th> 
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th style="width:80px;">1</th>
                          <td style="width:150px;" class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td style="width:250px;">Lorem ipsum dolor sit</td>
                          <td style="width:200px;">lorem ispusm</td>
                          <td style="width:100px;">high</td>
                          <td style="width:120px;">lorem ipsum</td>
                          <td style="width:150px;">lorem ipsum</td>
                          <td style="width:120px;">lorem ipsum</td>
                        </tr>

                        <tr>
                          <th scope="row">2</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">3</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">4</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">5</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">6</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">7</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">8</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">9</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">10</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">11</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                        <tr>
                          <th scope="row">12</th>
                          <td class="text-center"><button class="btn btn-outline-danger del-icon"><span class="fa fa-trash-o"></span></button> <button class="btn btn-outline-success"><span class="fa fa-pencil"></span></button></td>
                          <td>Lorem ipsum dolor sit</td>
                          <td>lorem ispusm</td>
                          <td>high</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                           <td>lorem ipsum</td>
                        </tr>
                    </tbody>
                  </table>
                </div>
                </div> <!-- End of cust-table-cont block -->
            </div>
        </div> <!-- ENd of row -->

.cust-table-cont { width:100%; overflow-x:auto; } 
.cust-table-cont .table-responsive { width:1190px;  }
.cust-table { table-layout:fixed;  } 
.cust-table thead, .cust-table tbody { 
display: block;
}
.cust-table tbody { max-height:620px; overflow-y:auto; } 

น้ำยาทำความสะอาด (CSS เท่านั้น)

.table-fixed tbody {
    display:block;
    height:85vh;
    overflow:auto;
}
.table-fixed thead, .table-fixed tbody tr {
    display:table;
    width:100%;
}


<table class="table table-striped table-fixed">
    <thead>
        <tr align="center">
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
            <td>Content 1</td>
        </tr>
        <tr>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
            <td>Longer Content 1</td>
        </tr>
    </tbody
</table

รองรับหลายตารางเลื่อนได้ในหน้าต่างเดียว

CSS บริสุทธิ์และไม่คงที่หรือเหนียว

ฉันค้นหาส่วนหัวของตารางคงที่พร้อมกับความกว้างอัตโนมัติ "td" และ "th" เป็นเวลาหลายปี ในที่สุดฉันก็เขียนอะไรบางอย่างมันใช้งานได้ดีสำหรับฉัน แต่ฉันไม่แน่ใจว่ามันทำงานได้ดีสำหรับทุกคน

ปัญหาที่ 1:เราไม่สามารถตั้งค่าความสูงของตารางหรือความสูงของร่างกายในขณะที่มี "tr" เป็นตันเนื่องจากคุณสมบัติตารางเริ่มต้น

การแก้ไข:ตั้งค่าคุณสมบัติการแสดงผลของตาราง

ปัญหาที่ 2:เมื่อเราตั้งค่าคุณสมบัติการแสดงผลความกว้างขององค์ประกอบ "td" จะต้องไม่กว้างเท่ากับองค์ประกอบ "th" และเป็นการยากที่จะเติมองค์ประกอบอย่างถูกต้องในตารางความกว้างเต็มรูปแบบเช่น 100%

วิธีแก้ปัญหา: CSS "flex" เป็นวิธีแก้ปัญหาที่ดีมากสำหรับความกว้างและเติมการตั้งค่าดังนั้นเราจะสร้างองค์ประกอบ tbody และ thead ของเราด้วย CSS "flex"

.ea_table {
  border: 1px solid #ddd;
  display: block;
  background: #fff;
  overflow-y: hidden;
  box-sizing: border-box;
  float: left;
  height:auto;
  width: 100%;
}

.ea_table tbody, thead {
  flex-direction: column;
  display: flex;
}

.ea_table tbody {
  height: 300px;
  overflow: auto;
}

.ea_table thead {
  border-bottom: 1px solid #ddd;
}

.ea_table tr {
  display: flex;
}


.ea_table tbody tr:nth-child(2n+1) {
  background: #f8f8f8;
  }

.ea_table td, .ea_table th {
  text-align: left;
  font-size: 0.75rem;
  padding: 1.5rem;
  flex: 1;
}

<table class="ea_table">
    <thead>
      <tr>
        <th>Something Long</th>
        <th>Something </th>
        <th>Something Very Long</th>
        <th>Something Long</th>
        <th>Some</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>

    </tbody>

  </table>

jsfiddle

<style>

thead, tbody
{
    display: block;
}

tbody 
{
   overflow: auto;
   height: 100px;
}

th,td
{
    width: 120px;
}

</style>

<table class="table table-bordered table-striped">
    <thead style="background-color:lightgreen">
        <tr>
            <th>Id</th><th>Name</th><th>Roll</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Shahriar</td>
            <td>12</td>
        </tr>
    </tbody>
</table>

ใช้ลิงค์นี้, stackoverflow.com/a/17380697/1725764 , โดย Hashem Qolami ตามความคิดเห็นของโพสต์ดั้งเดิมและใช้การแสดง: inline-blocks แทนการลอย แก้ไขเส้นขอบถ้าตารางมีคลาส 'ล้อมรอบด้วยตาราง' ด้วย

table.scroll {
  width: 100%;  
  &.table-bordered {
    td, th {
      border-top: 0;
      border-right: 0;
    }    
    th {
      border-bottom-width: 1px;
    }
    td:first-child,
    th:first-child {
      border-right: 0;
      border-left: 0;
    }
  }
  tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;  
  }
  tbody, thead {
    display: block;
  }
  tr {
    width: 100%;
    display: block;
  }
  th, td {
    display: inline-block;

  }
  td {
    height: 46px; //depends on your site
  }
}

จากนั้นเพิ่มความกว้างของ td และ th

table.table-prep {
  tr > td.type,
  tr > th.type{
    width: 10%;
  }
  tr > td.name,
  tr > th.name,
  tr > td.notes,
  tr > th.notes,
  tr > td.quantity,
  tr > th.quantity{
    width: 30%;
  }
}

ฉันทำบางส่วนนะทำงาน CSS position: stickyเพียงการแก้ปัญหาโดยใช้ ควรทำงานบนเบราว์เซอร์ที่เขียวตลอดปี พยายามปรับขนาดเบราว์เซอร์ ยังมีปัญหาเค้าโครงบางอย่างใน FF จะแก้ไขในภายหลัง แต่อย่างน้อยส่วนหัวของตารางจะจัดการการเลื่อนในแนวตั้งและแนวนอน ตัวอย่าง Codepen

HTML

<!DOCTYPE html>
<html>
<head>
    <title>RoboPage</title>
    <link rel="stylesheet" type="text/css" href="practice.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>
<body>

        <div class="container">
                <table class="table">
                  <thead>
                    <tr>
                      <th class="col-md-3 col-sm-3 ">First Name</th>
                      <th class="col-md-3 col-sm-3 ">Last Name</th>
                      <th class="col-md-6 col-sm-6 ">E-mail</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td class="col-md-3 col-sm-3">Top Row</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>

                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                    <tr>
                      <td class="col-md-3 col-sm-3">John</td>
                      <td class="col-md-3 col-sm-3">Doe</td>
                      <td class="col-md-6 col-sm-6">johndoe@email.com</td>
                    </tr>
                  </tbody>
                </table>
              </div>


<script src='practice.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

CSS

thead,tbody,tr,td,th{
    display:block;
}
tbody{
    height:200px;
    overflow-y:auto;
    width: 100%;
}
thead > tr > th, tbody > tr > td{
    float:left;
}

วิธีที่ง่ายโดยไม่มีความกว้างคงที่:

.myTable tbody{
  display:block;
  overflow:auto;
  height:200px;
  width:100%;
}
.myTable thead tr{
  display:block;
}

แหล่ง

ตอนนี้บน onLoad เพื่อปรับความกว้าง th เพียงเพิ่มสคริปต์ jquery นี้:

$.each($('.myTable tbody tr:nth(0) td'), function(k,v) {
    $('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
});

วางตารางใน div เช่นนี้เพื่อให้ตารางเลื่อนได้ในแนวตั้ง เปลี่ยนoverflow-yเป็นoverflow-xทำให้ตารางเลื่อนได้ในแนวนอน เพียงoverflowเพื่อให้ตารางเลื่อนได้ทั้งแนวนอนและแนวตั้ง

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>