Bootstrap 中的水平和垂直可滚动表格
Posted
技术标签:
【中文标题】Bootstrap 中的水平和垂直可滚动表格【英文标题】：Horizontal and vertical Scroll-able table in Bootstrap 【发布时间】：2018-06-21 09:06:20 【问题描述】：我正在使用引导程序设计一个表格，响应式表格。直到它少了没有。列，很好。使用固定的标题，它工作正常。
JSFIDDLE VERTICAL SCROLLBAR
现在，我需要表格中有超过 20 列，并且它也应该可以水平滚动。
JSFIDDLE HORIZONTAL SCROLLBAR
我试图让它们一起工作，用于垂直滚动的固定标题表和带有可滚动标题的水平滚动。
我试过了：
.table-fixed thead
width: 97%;
.table-fixed tbody
height: 150px;
overflow-y: auto;
width: 100%;
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th
display: block;
.table-fixed tbody td,
.table-fixed thead>tr>th
float: left;
border-bottom-width: 0;
.table-fixed thead
width: 97%;
.table-fixed tbody
height: 230px;
overflow-y: auto;
width: 100%;
.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th
display: block;
.table-fixed tbody td,
.table-fixed thead>tr>th
float: left;
border-bottom-width: 0;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="panel panel-default table-responsive">
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-1">S.No.</th>
<th class="col-xs-1">Name</th>
<th class="col-xs-1">Balance</th>
<th class="col-xs-1">Action</th>
<th class="col-xs-1">S.No.</th>
<th class="col-xs-1">Name</th>
<th class="col-xs-1">Balance</th>
<th class="col-xs-1">Action</th>
<th class="col-xs-1">S.No.</th>
<th class="col-xs-1">Name</th>
<th class="col-xs-1">Balance</th>
<th class="col-xs-1">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
<td class="col-xs-1">1</td>
<td class="col-xs-1">Mike Adams</td>
<td class="col-xs-1">100000000000000</td>
<td class="col-xs-1">ewed</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>我只是添加了重复的行以使表格可以滚动。 如何使表格可垂直滚动（带有固定标题）和水平滚动（带有可滚动标题）？
【问题讨论】：
【参考方案1】：过了一会儿，我的查询得到了一个解决方案.. Solution to make table scroll-able vertically and horizontally and responsive
$('table').on('scroll', function()
$("#" + this.id + " > *").width($(this).width() + $(this).scrollLeft());
);html
font-family: verdana;
font-size: 10pt;
line-height: 25px;
table
border-collapse: collapse;
width: 300px;
overflow-x: scroll;
display: block;
thead
background-color: #EFEFEF;
thead,
tbody
display: block;
tbody
overflow-y: scroll;
overflow-x: hidden;
height: 140px;
td,
th
min-width: 100px;
height: 25px;
border: dashed 1px lightblue;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="table-responsive">
<table class="table" id="table1">
<thead>
<tr>
<th>sadasdasdfasdfasfasfasfa#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-6 col-md-6">
<div class="table-responsive">
<table class="table" id="table2">
<thead>
<tr>
<th>sadasdasdfasdfasfasfasfa#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>注意：转到 jsFiddle 可以更好地查看。
【讨论】：
以上是关于Bootstrap 中的水平和垂直可滚动表格的主要内容，如果未能解决你的问题，请参考以下文章
html中表格水平和垂直滚动,表头垂直不动,可以水平滚动，大神们请问怎么实现啊？