ブートストラップクラスの使用時に問題を修正できません

Question

私のコードに2つの問題があります。ヘッダーは固定されていませんし、2番目の問題はヘッダー/行には適用されません。 私はブートストラップクラスを使用しましたが、それでも問題に直面しています。私はテーブルのヘッダーを修正し、行だけがスクロール可能でなければならず、テキストが長ければ自動的にワードラップするはずです。私は私のアプリケーション（約15列）の複数の列を持っています。アドバイスをしてください。サンプルコードclick hereを表示するには

。

サンプルHTMLコード：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body" id="modal-body"> 
       <table id="myTable" class="table table-fixedheader table-bordered table-striped"> 
        <thead> 

         <tr class="row"> 
          <th class="col-md-3">Header1</th> 
          <th class="col-md-4">Header2Header2Header2Header2</th> 
          <th class="col-md-3">Header3</th> 
          <th class="col-md-4">Header4</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr class="row"> 
          <td class="col-md-3">111111111111111111111111111111111111111111111111111111111111111111111</td> 
          <td class="col-md-4">33333</td> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">5443545435354543</td> 
         </tr> 
         <tr class="row"> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">33333</td> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">5437665</td> 
         </tr> 
         <tr class="row"> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">33333</td> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">5435435443</td> 
         </tr> 
         <tr class="row"> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">33333</td> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">68678454</td> 
         </tr> 
         <tr class="row"> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">786876</td> 
          <td class="col-md-3">8787876</td> 
          <td class="col-md-4">6765767</td> 
         </tr> 
         <tr class="row"> 
          <td class="col-md-3">7656765</td> 
          <td class="col-md-4">656456</td> 
          <td class="col-md-3">116611</td> 
          <td class="col-md-4">43434</td> 
         </tr> 
         <tr class="row"> 
          <td class="col-md-3">43243432434324342</td> 
          <td class="col-md-4">33344343233</td> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">4343</td> 
         </tr> 
         <tr class="row"> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">432434343243243</td> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">432443</td> 
         </tr> 
         <tr class="row"> 
          <td class="col-md-3">1111</td> 
          <td class="col-md-4">333333</td> 
          <td class="col-md-3">111312312123121</td> 
          <td class="col-md-4">32112</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

Answer 1

あなたは非テーブルのアプローチを試みることができます。セルで内容が折り返されている列で幅を設定している場合はOKです。ここに例がありますhttps://codepen.io/flurrd/pen/jmMNxK?editors=1100

注：この例ではクラス名がひどいです。私は適切な使用のためにそれをBEMしたいと思います。

.table-body { 
    max-height: 200px; 
    overflow-y:auto; 
} 
.t-row { 
    display: flex; 
    border-bottom: 1px solid grey; 
} 
.t-row:nth-child(even){ 
    background: #e3e3e3; 
} 
.col { 
    word-wrap: break-word; 
    flex: 1 0 30%; 
    max-width: 33.3333%; 
} 
.cell { 
    padding: 8px; 
} 


<div class="table-wrap"> 
    <div class="t-row t-header"> 
    <div class="col"> 
     <div class="cell"> 
     Header 1 
     </div> 
    </div> 
    <div class="col"> 
     <div class="cell"> 
     Header 1 
     </div> 
    </div> 
    <div class="col"> 
     <div class="cell"> 
     Header 1 
     </div> 
    </div> 
    </div> 
    <div class="table-body"> 
    <div class="t-row"> 
     <div class="col"> 
     <div class="cell"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
     </div> 
     </div> 
     <div class="col"> 
     <div class="cell"> 
      1111 
     </div> 
     </div> 
     <div class="col"> 
     <div class="cell"> 
      11111111 
     </div> 
     </div> 
    </div> 
    </div> 
</div>