how to create a scrollable table with fixed headers on a bootstrap modal body?

Question

I try this but this is not working.the fields value are comes 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>

your answer is here : http://stackoverflow.com/questions/21168521/scrollable-table-with-fixed-header-in-bootstrap?rq=1 — , Jul 23 '16 at 05:24
This is not The perfect answer .Because < tbody td, thead th { width: 19.2%; float: left; } >Width are fixed. — MJ Miraj, Jul 23 '16 at 05:32

score 2 · Answer 1 · 2016-07-23T07:30:22.290

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

The problem is, Thead Column are not Flexible .Thous column are stuck on Fixed width. — MJ Miraj, Jul 23 '16 at 06:50
I need. `123aaaaaaaaaaaaaaaaaaaaa777777777777777777777777777777777777777777777hsfd asdufhf uasdf` Know thead column and tbody column width are auto generate. — MJ Miraj, Jul 23 '16 at 06:53
can't understand ! you said scroll table inside modal. i did. you can customize table width and height. or am i missing something. could you explain !! — , Jul 23 '16 at 06:54
Please see your Output on a editor. look Table header and table body Width are not match. — MJ Miraj, Jul 23 '16 at 07:04

score 1 · Answer 2 · answered Jul 01 '17 at 13:08

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.

score 1 · Answer 3 · answered Apr 01 '18 at 06:20

1

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.

answered Apr 01 '18 at 06:20

how to create a scrollable table with fixed headers on a bootstrap modal body?

3 Answers3

Linked