Table fixed header and scrollable body

前端 未结 29 1254
粉色の甜心
粉色の甜心 2020-11-22 05:33

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or

相关标签:
29条回答
  • 2020-11-22 06:04

    In my eyes, one of the best plugins for jQuery is DataTables.

    It also has an extension for fixed header, and it is very easily implemented.

    Taken from their site:

    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 );
    } );
    

    But the simplest you can have for just making a scrollable <tbody> is:

    //configure table with fixed header and scrolling rows
    $('#example').DataTable({
        scrollY: 400,
        scrollCollapse: true,
        paging: false,
        searching: false,
        ordering: false,
        info: false
    });
    
    0 讨论(0)
  • 2020-11-22 06:05

    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>

    You don't need js. Important is to set table height in [vh]

    0 讨论(0)
  • 2020-11-22 06:06

    Don't need the wrap it in a 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

    0 讨论(0)
  • 2020-11-22 06:07

    table {
    
        display: block;
    }
    
    thead, tbody {
        display: block;
    }
    tbody {
        position: absolute;
        height: 150px;
        overflow-y: scroll;
    }
    td, th {
        min-width: 100px !important;
        height: 25px !important;
        overflow:hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100px !important;
    }
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    
    <div class="container" style="position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden">
    
    
    <table>
             <thead>
            <tr>
                 <th>Col1</th>
                <th>Col2</th>
                <th>Username</th>
                <th>Password</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Col16</th>
                <th>Col7</th>
                <th>Col8</th>
                <th>Col9</th>
                <th>Col10</th>
                <th>Col11</th>
                <th>Col12</th>
                <th>Col13</th>
                <th>Col14</th>
                <th>Col15</th>
                <th>Col16</th>
                <th>Col17</th>
                <th>Col18</th>
            </tr>
                  </thead>
             <tbody>
             </tbody>
              <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
              
                        <tr>
              <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
                <td>Long Value</td>
                          <td>Title</td>
              </tr>
             </table>
    
    
    
    </div>`enter code here`

    0 讨论(0)
  • 2020-11-22 06:08

    Used this link, stackoverflow.com/a/17380697/1725764, by Hashem Qolami at the original posts' comments and used display:inline-blocks instead of floats. Fixes borders if the table has the class 'table-bordered' also.

    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
      }
    }
    

    Then just add the widths of the td and 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%;
      }
    }
    
    0 讨论(0)
提交回复
热议问题