Table fixed header and scrollable body

前端 未结 29 1236
粉色の甜心
粉色の甜心 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:00
    <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>
    
    0 讨论(0)
  • 2020-11-22 06:01

    put the table inside the div like this to make scrollable table vertically. change overflow-yto overflow-x to make table scrollable horizontally. just overflow to make table scrollable both horizontal and vertical.

    <div style="overflow-y: scroll;"> 
        <table>
        ...
        </table>
    </div>
    
    0 讨论(0)
  • 2020-11-22 06:02

    I had a lot of trouble getting the stickytableheaders library to work. Doing a bit more searching, I found floatThead is an actively maintained alternative with recent updates and better documentation.

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

    For whatever it's worth now: I did post a solution to a sister-thread Table scroll with HTML and CSS which

    • takes two tables (one for only header, one for all - layouted by the browser)
    • after layouting, adjust the upper (header-only) table to the widths of the lower one
    • hide (visibility, not display) the header of the lower table and make the lower table scrollable w/in a div

    The solution is agnostic to any styles / frameworks used - so maybe it's useful here as well...

    A long description is in Table scroll with HTML and CSS / the code is also in this pen: https://codepen.io/sebredhh/pen/QmJvKy

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

    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;
    }
    
    0 讨论(0)
  • 2020-11-22 06:04

    Here is the working solution:

    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>

    Link to jsfiddle

    0 讨论(0)
提交回复
热议问题