我有以下样式和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>
答案 0 :(得分：6)
您需要按照以下代码删除一些样式：
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>
答案 1 :(得分：5)
修复损坏的单元格
您需要从tbody中删除display：block并从tr元素中删除display：table。
.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/15/
制作标题
粘性标头取决于您需要的浏览器支持。 最简单的方法是使用位置：粘性，看看这个小提琴中的工作：https://jsfiddle.net/zuxq2gr0/17/ 这仅适用于现代浏览器，需要前缀，并且不能在IE或Edge中工作（请参阅CanIUse：https://caniuse.com/#search=sticky）。那里可能有很好的polyfills，但我还没有尝试过。
你可以使用position：fixed，但是你需要知道所有的高度，等等。请参阅此codepen：https://codepen.io/tjvantoll/pen/JEKIu
除此之外，你可能需要使用javascript。有很多教程可以覆盖javascript粘性标题。我还没有尝试过，但这里来自Codedrops。关于这个主题也有一些SO问题，例如：
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
答案 2 :(得分：2)
我认为你想要的是tbody仍然可以滚动。你把它变成了阻塞，但是为了保持行的宽度，你需要同时制作thead块
tbody,thead {
display:block;
}
tbody{
overflow-y: auto;
height: calc(100vh - 130px);
}
您会注意到Thead列不符合要求，我知道修复此问题的唯一方法是通过JS或使用CSS设置每个列宽。
这是指向另一个堆栈文章的链接：
HTML table with 100% width, with vertical scroll inside tbody
答案 3 :(得分：1)
只需删除<tbody>和 gunicorn -b 0.0.0.0:8000 --preload faceapi:app
，这将是演示链接
Demo