javascript - how to create a scrollable table with fixed headers on a bootstrap modal body? - Stack Overflow

admin管理员组

文章数量:1315090

I try this but this is not working.the fields value are es dynamically.so the width are not fixed.

<div class="table-responsive">

    <table class="table table-hover">
  <thead>

      <tr>
     ...

      </tr>
    </thead>

    <tbody style="height:100px;overflow-y:scroll;">
     <tr>
      ...
      </tr>
   </tbody>
    </table>
</div>

I try this but this is not working.the fields value are es dynamically.so the width are not fixed.

<div class="table-responsive">

    <table class="table table-hover">
  <thead>

      <tr>
     ...

      </tr>
    </thead>

    <tbody style="height:100px;overflow-y:scroll;">
     <tr>
      ...
      </tr>
   </tbody>
    </table>
</div>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jul 23, 2016 at 4:47 bhansa 7,53433 gold badges3232 silver badges5858 bronze badges asked Jul 23, 2016 at 4:23 MJ MirajMJ Miraj 11511 silver badge1212 bronze badges 3

• 1 your answer is here : stackoverflow./questions/21168521/… – user4520208 Commented Jul 23, 2016 at 5:24
• This is not The perfect answer .Because < tbody td, thead th { width: 19.2%; float: left; } >Width are fixed. – MJ Miraj Commented Jul 23, 2016 at 5:32
• Is this helpful – bhansa Commented Jul 23, 2016 at 5:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

HTML

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
              <table id="myTable" class="table fix-head  table-striped">
            <thead>
                <tr id="pp">
                    <th>Column1</th>
                    <th >Column2</th>
                    <th >Column3</th>
                    <th >Column4</th>
                    <th>Column5</th>
                  <th>Column6</th>
                  <th>Column7</th>
                  <th>Column8</th>
                  <th>Column9</th>
                </tr>
            </thead>
            <tbody style="height:110px">
              <tr>
              <td>1</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
               <td>Table cell</td>
               <td>Table cell</td>
               <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>4</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>5</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>6</td>

              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>7</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>8</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            </tbody>
        </table>
    </div>
  </div>
</div>

CSS

table.fix-head>tbody, table {
        display:block;

    }

     table.fix-head>tbody {
        overflow-y: scroll;
        height: 100px;
}
#pp th{

  padding-right:28px;
}
#myTable{
  width:100%;
}

JS

 $(document).ready(function(){
      $('#myModal').on('shown.bs.modal', function () {
        $(this).find('.modal-dialog').css({width:'auto',
                                   height:'auto', 
                                  'max-height':'100%'});
    });
  });

Check DEMO here : http://codepen.io/ihemant360/pen/vKjNdm

I have found workaround for this issue, this works if you have to display only table in the modal body.

You can add table header in the modal header and table body in modal body. Give fixed height to modal body and add "overflow-y: scroll" to it.

Hope it is helpful to someone.

You can add table header in the modal header and table body in modal body. Give fixed height to modal body and add "overflow-y: scroll" to it.

Hope it is helpful to someone.

本文标签： javascripthow to create a scrollable table with fixed headers on a bootstrap modal bodyStack Overflow