テーブルの行とセルが壊れています

私は以下のスタイルとHTMLを持っていますが、表示すると、テーブルが壊れているように見えます（すべてのテーブル行とセルが壊れています）。なぜか分からない。どうすれば修正できますか？テーブルの行とセルが壊れています

TBODYは、この大きさを有する必要が：height: calc(100vh - 130px);

赤い線は、テーブルのサイズを定義します。

編集：私のtbodyスクロールが必要で、theadを修正する必要があります。

jsfiddle：https://jsfiddle.net/zuxq2gr0/11/

.col-lg-12 { 
 
    border: 1px solid red; 
 
} 
 

 
tbody { 
 
    display: block; 
 
    overflow-y: scroll; 
 
    height: calc(100vh - 130px); 
 
} 
 

 
tbody > tr { 
 
    display: table; 
 
    width: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<div class="col-lg-8 "> 
 
    <div class="col-lg-12"> 
 
    <table class="table table-striped" aurelia-table=""> 
 
     <thead> 
 
     <tr> 
 
      <th>test</th> 
 
      <th>test</th> 
 
      <th>test</th> 
 
      <th>test</th> 
 
      <th>test</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <!-- textarea --> 
 
    <div class="form-group"> 
 
     <label class="col-md-12 control-label" for="textarea"></label> 
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 
      <compose view="./-box.html"></compose> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-06-07 Raduken

は..あなたは、固定ヘッダを維持しようとしていますか？ –

yeap、セルを整列 – Raduken

悲しいことに、これは 'tbody'と' overflow-y'の高さを指定するだけでは不可能です。それはうまく動作しません。あなたが指定したすべての 'display'を削除し、ヘッダーを固定しておくプラグインを使ってみる必要があります。 –

です：いくつかのSOたとえば、このトピックに関するご質問は、もあります次のコードに従ってスタイルを使用します。

table { 
 
    width: 50%; 
 
} 
 

 
thead, tbody, tr, td, th { 
 
    display: block; 
 
} 
 

 
thead th { 
 
    height: 30px; 
 
} 
 

 
tbody { 
 
    overflow-y: auto; 
 
    height: calc(100vh - 130px); 
 
} 
 

 
tbody td, thead th { 
 
    float: left; 
 
    width: 20%; 
 
} 
 

 
tr:after { 
 
    clear: both; 
 
    content: ' '; 
 
    display: block; 
 
    visibility: hidden; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 

 
<div class="col-lg-8 "> 
 
    <div class="col-lg-12"> 
 
    <table class="table table-striped" aurelia-table=""> 
 
     <thead> 
 
     <tr> 
 
      <th>test</th> 
 
      <th>test</th> 
 
      <th>test</th> 
 
      <th>test</th> 
 
      <th>test</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     <tr class=""> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td> 
 
      <div class="form-group"> 
 
       <select id="selectbasic" name="selectbasic" class="form-control col-lg-6 col-md-6 col-sm-6"> 
 
       <option value="" selected=""></option> 
 
       <option value="-action"> Action</option> 
 
       </select> 
 
      </div> 
 
      </td> 
 
      <td> 
 
      <i class="fa fa-minus" aria-hidden="true" click.delegate=""></i> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    <!-- textarea --> 
 
    <div class="form-group"> 
 
     <label class="col-md-12 control-label" for="textarea"></label> 
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 
      <compose view="./-box.html"></compose> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-06-07 08:53:46 Trusha

メイト、 'overflow-y：scroll'' height：calc（100vh - 130px） 'これは' tbodyで動作しません'とにかく、' display'プロパティを削除することは、位置合わせのプロンプトに対する有効な解決策です。 –

あなたが表示削除する必要が壊れた細胞

解決するには、次のtbodyからブロックを、表示削除：TR要素からテーブルを。 https://jsfiddle.net/zuxq2gr0/15/

スティッキーヘッダが必要なブラウザのサポートに依存

スティッキーヘッダーを作る：

.col-lg-12 { 
    border:1px solid red; 
} 
tbody { 
    overflow-y: scroll; 
    height: calc(100vh - 130px); 
    width: 100%; 
} 

tbody > tr { 
    width: 100%; 
}

はフィドルを参照してください。これは最も簡単な方法です：スティッキー、このフィドルの仕事を見てください。https://jsfiddle.net/zuxq2gr0/17/ これは現代のブラウザでのみ機能し、プレフィックスを必要とし、IEまたはEdgeでは機能しません（CanIUse：https://caniuse.com/#search=sticky参照）。そこには良いpolyfillがあるかもしれませんが、私は試していません。

あなたはposition：fixedを使うことができますが、すべての高さなどを知る必要があります。このコードを参照してください：https://codepen.io/tjvantoll/pen/JEKIu

これ以外の場合は、おそらくJavaScriptを使用する必要があります。 javascriptのスティッキーヘッダーをカバーするチュートリアルがあります。私はそれらを試していないが、Codedropsからのものがここにある。

Table header to stay fixed at the top when user scrolls it out of view with jQuery

HTML table headers always visible at top of window when viewing a large table

出典

2017-06-07 08:43:21 deadfishli

申し訳ありませんが、tbodyと行内のコンテンツは整列する必要がありますが、まだ – Raduken

申し訳ありませんが、間違ったフィドルコードを使用しました：https://jsfiddle.net/zuxq2gr0/15/ – deadfishli

ああ。私は元の質問からそれを得ていませんでした。あなたはそれを編集できますか？私は何ができるかを見ていきます。 – deadfishli

だけ<thead>を削除し、<tbody>それはここで働いてますが、あなたは、いくつかを削除する必要がデモリンク Demo

出典

2017-06-07 08:48:03

これは解決策ではありません。 'CSS'を読んでください。そのスタイルは ''または ' ' –

のために間違っていないのでデモを参照して –

Dudeと言うと、標準のhtmlタグを削除すると解決策が得られます。真剣に？私はあなたがその問題についてCSSを知らないと思っています –

私が何を望んでいることはtbodyはまだスクロールすることだと思います。あなたはブロックを作って右のトラックにあったが、同様にあなたがあなたのtheadブロックを作成する必要があります行の幅を維持するために

tbody,thead { 
    display:block; 
} 

tbody{ 
    overflow-y: auto; 
    height: calc(100vh - 130px); 

}

Fiddle

あなたはTHEAD列があるわかります私はこれを修正するために知っている唯一の方法はJSを介しているかCSSを使って各列の幅をスタイリングすることです。ここで

別のスタックの記事へのリンク：私は理解しているものから

HTML table with 100% width, with vertical scroll inside tbody

出典

2017-06-07 09:22:29 Landy

テーブルの行とセルが壊れています

答えて

関連する問題