ブートストラップモーダル本体に固定ヘッダーを持つスクロールテーブルを作成する方法は？

Question

私はこれを試してみましたが、これは動作していません。フィールドの値はdynamic.soの幅が固定されていません。

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

Answer 1

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%'}); 
    }); 
    }); 

ここ

チェックDEMO：http://codepen.io/ihemant360/pen/vKjNdm

Answer 2

私はあなたがモーダル体内でのみテーブルを表示する必要がある場合、これは動作しますが、この問題の回避策を発見しました。

モーダルヘッダーとテーブル本体をモーダルボディに追加することができます。 モーダルボディに固定高さを与え、 "overflow-y：scroll"を追加します。

誰かに役立つことを願っています。