我正在一个项目中使用Angular 6和Bootstrap表格,我使用了以下代码创建了一个竖向滚动的表格:
<table class="table table-striped table-bordered" style="margin-bottom: 0">
<thead> <!-- Column names -->
<tr>
<th scope="col">#</th>
<th scope="col">Col 1</th>
<th scope="col">Col 2</th>
<th scope="col">Col 3</th>
...
<th scope="col">Col N</th>
</tr>
</thead>
<tbody> <!-- Data -->
<tr>
<th scope="row">1</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
<tr>
<th scope="row">2</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
...
<tr>
<th scope="row">n</th>
<td>AAAAA</td>
<td>BBBBB</td>
<td>CCCCC</td>
...
<td>DDDDD</td>
</tr>
</tbody>
</table>
还有CSS:
tbody {
display:block;
max-height:500px;
overflow-y:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
但是,如果有很多列,它看起来并不好看。
所以我想添加一个水平滚动条,这样我就可以水平滚动整个表格,垂直滚动只滚动表格的主体部分。 为了实现水平滚动,我使用了 .table-responsive,代码如下:
<div class="table-responsive">
<table class="table table-striped table-bordered" style="margin-bottom: 0">
...
</table>
</div>
但是只有在没有css垂直滚动条的情况下才起作用。
我想将这两种方式结合起来滚动表格。 我将CSS部分的宽度值从100%更改为静态像素值,如下所示:
...
thead, tbody tr {
display:table;
width: 2000px;
table-layout:fixed;
}
thead {
width: calc( 2000px - 1em )
}
它有效了,但我需要设置一个静态宽度,我不知道如何根据列数动态设置宽度。