如何在表格中間滾動時固定頁腳和 header

Question

有人可以告訴我如何根據屏幕尺寸固定我的代碼的 header 和頁腳，並且中間是可滾動的。 我看到一些東西在討論這個，但沒有真正的解釋。 我對編碼非常陌生，因此對我來說這是一個試驗錯誤。 只是我有趣的項目讓我繼續前進。

<div class="container-fluid">
 <div class="table-responsive">
    <table class="table table-striped table-sm table-hover">
      <thead>
        <tr>
          <th nowrap="nowrap" class=" text-center">tes1#</th>
          <th nowrap="nowrap" class=" text-center">col2</th>
          <th nowrap="nowrap" class=" text-center">col3</th>
          <th nowrap="nowrap" class=" text-center">col4</th>
          <th nowrap="nowrap" class=" text-center">col6</th>
          <th nowrap="nowrap" class=" text-center">col7</th>
          <th nowrap="nowrap" class=" text-center">col8</th>
        </tr>
      </thead>
      <tbody>


               <!------Item 1-------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>


        <!---------Item 2----------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>


        <!---------Item 2----------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>


        <!---------Item 3----------->
        <tr>
          <td nowrap="nowrap" class=" text-left">1,001</td>
          <td nowrap="nowrap" class=" text-left">Apple</td>
          <td nowrap="nowrap" class=" text-left">Fruits</td>
          <td nowrap="nowrap" class=" text-left">Red Apple</td>
          <td nowrap="nowrap" class=" text-left">Large</td>
          <td nowrap="nowrap" class=" text-left">n/a</td>
          <td nowrap="nowrap" class=" text-center">Each</td>
        </tr>

Answer 1

使用位置屬性將幫助您獲得表頭，您需要使其 position 粘在表的第一行並將其頂部設置為零，以便始終位於頁面頂部這是我和@tao 的嘗試：

HTML：

  <div class="container-fluid">
    <div class="table-responsive">
       <table class="table table-striped table-sm table-hover">
         <thead>
           <tr>
             <th nowrap="nowrap" class=" text-center">tes1#</th>
             <th nowrap="nowrap" class=" text-center">col2</th>
             <th nowrap="nowrap" class=" text-center">col3</th>
             <th nowrap="nowrap" class=" text-center">col4</th>
             <th nowrap="nowrap" class=" text-center">col6</th>
             <th nowrap="nowrap" class=" text-center">col7</th>
             <th nowrap="nowrap" class=" text-center">col8</th>
           </tr>
         </thead>
         <tbody>


                  <!------Item 1-------->
           <tr>
             <td nowrap="nowrap" class=" text-left">1,001</td>
             <td nowrap="nowrap" class=" text-left">Apple</td>
             <td nowrap="nowrap" class=" text-left">Fruits</td>
             <td nowrap="nowrap" class=" text-left">Red Apple</td>
             <td nowrap="nowrap" class=" text-left">Large</td>
             <td nowrap="nowrap" class=" text-left">n/a</td>
             <td nowrap="nowrap" class=" text-center">Each</td>
           </tr>


           <!---------Item 2----------->
           <tr>
             <td nowrap="nowrap" class=" text-left">1,001</td>
             <td nowrap="nowrap" class=" text-left">Apple</td>
             <td nowrap="nowrap" class=" text-left">Fruits</td>
             <td nowrap="nowrap" class=" text-left">Red Apple</td>
             <td nowrap="nowrap" class=" text-left">Large</td>
             <td nowrap="nowrap" class=" text-left">n/a</td>
             <td nowrap="nowrap" class=" text-center">Each</td>
           </tr>


           <!---------Item 2----------->
           <tr>
             <td nowrap="nowrap" class=" text-left">1,001</td>
             <td nowrap="nowrap" class=" text-left">Apple</td>
             <td nowrap="nowrap" class=" text-left">Fruits</td>
             <td nowrap="nowrap" class=" text-left">Red Apple</td>
             <td nowrap="nowrap" class=" text-left">Large</td>
             <td nowrap="nowrap" class=" text-left">n/a</td>
             <td nowrap="nowrap" class=" text-center">Each</td>
           </tr>


           <!---------Item 3----------->
           <tr>
             <td nowrap="nowrap" class=" text-left">1,001</td>
             <td nowrap="nowrap" class=" text-left">Apple</td>
             <td nowrap="nowrap" class=" text-left">Fruits</td>
             <td nowrap="nowrap" class=" text-left">Red Apple</td>
             <td nowrap="nowrap" class=" text-left">Large</td>
             <td nowrap="nowrap" class=" text-left">n/a</td>
             <td nowrap="nowrap" class=" text-center">Each</td>
           </tr>
   <footer class="footer">300 result</footer>

CSS：

body {
  margin: 0;
  padding: 0;
  max-height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
.table-responsive {
  max-height: calc(100vh - 60px);
  padding: 0 15px;
}
footer {
  flex: 0 0 auto;
  padding: 1rem;
  background-color: #eee;
  border-top: 1px solid #ddd;
}
thead th {
    position: sticky;
    background-color: white;
    top: 0;
}

Answer 2

對所提出的解決方案的小改進：

 body { max-height: 100vh; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; }.table-responsive.table-responsive { overflow-y: auto; /* fix pesky sticky header 1px gap */ margin-top: -1px; } /* sticky header */ thead th { position: sticky; top: 0; /* optional styling, ignore */ background-color: white; text-align: left; } /* optional styling, ignore */ footer { padding: 1rem 0; background-color: #eee; box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.1), 0 -3px 4px 0 rgba(0, 0, 0, 0.07), 0 -3px 3px -2px rgba(0, 0, 0, 0.06); border-top: 1px solid white; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <main> <div class="container-fluid h-100 position-relative"> <div class="h-100 row position-absolute w-100"> <div class="col h-100 pr-0"> <div class="table-responsive h-100 pr-3"> <table class="table table-striped table-sm table-hover header-fixed"> <thead> <tr> <th nowrap="nowrap">tes1#</th> <th nowrap="nowrap">col2</th> <th nowrap="nowrap">col3</th> <th nowrap="nowrap">col4</th> <th nowrap="nowrap">col6</th> <th nowrap="nowrap">col7</th> <th nowrap="nowrap" class=" text-center">col8</th> </tr> </thead> <tbody> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class="text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class=" text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class=" text-center">Each</td> </tr> <tr> <td nowrap="nowrap">1,001</td> <td nowrap="nowrap">Apple</td> <td nowrap="nowrap">Fruits</td> <td nowrap="nowrap">Red Apple</td> <td nowrap="nowrap">Large</td> <td nowrap="nowrap">n/a</td> <td nowrap="nowrap" class=" text-center">Each</td> </tr> </tbody> </table> </div> </div> </div> </div> </main> <footer class="container-fluid"> <div class="row"> <div class="col"> <div contenteditable=true> <h4>Change footer height (click to edit)</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> </footer>

它使用display:grid而不是 flexbox 到 position 視口底部的頁腳，這基本上意味着它不需要將頁腳高度硬編碼到滾動條的max-height中。
單擊以編輯頁腳內容並相應地觀看表格滾動條更新。