Table fixed header and scrollable body

前端 未结 29 1237
粉色の甜心
粉色の甜心 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 05:55

    You should try with "display:block;" to tbody, because now it's inline-block and in order to set height, the element should be "block"

    0 讨论(0)
  • 2020-11-22 05:56

    Multiple scrollable table support in a single window.

    Pure CSS & No fixed or sticky.

    I am searching fixed table header with auto "td" and "th" width for years. Finally i coded something, it's work well for me but i am not sure is it work well for everyone.

    Problem 1: We can't set table or tbody height while have tons of "tr" it's because of default table properties.

    Solution: Set table a display property.

    Problem 2: When we set a display property, the width of "td" elements can't be equal width of "th" elements. And it is hard to fill elements properly in full width table like 100%.

    Solution: CSS "flex" is very good solution for width and fill set-ups, so we will build our tbody and thead elements with CSS "flex".

    .ea_table {
      border: 1px solid #ffffd;
      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 #ffffd;
    }
    
    .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

    0 讨论(0)
  • 2020-11-22 05:56

    Here is my copen pen on how to make fixed table header with scrollable rows and columns. The columns are also been fixed width, 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; } 

    0 讨论(0)
  • 2020-11-22 05:59

    Likely you'll get multiple tables on one page, therefore you need CSS classes. Please find a modified @giulio's solution for that.

    Just declare it in table:

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

    Be aware that current implementation suits five columns only. If you need a different number, change the width parameter from 20% to *100% / number_of_columns*.

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

    Update

    For newer and still maintained library try jquery.floatThead (as mentioned by Bob Jordan in the comment) instead.

    Old Answer

    This is a very old answer, the library mentioned below no longer maintained.

    I am using StickyTableHeaders on GitHub and it works like charm!

    I had to add this css to make the header not transparent though.

    table#stickyHeader thead {
      border-top: none;
      border-bottom: none;
      background-color: #FFF;
    }
    
    0 讨论(0)
  • 2020-11-22 06:00

    It is easier with css

    table tbody { display:block; max-height:450px; overflow-y:scroll; }
    table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }
    
    0 讨论(0)
提交回复
热议问题