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

• 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

3 Answers 3

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.