如何在引导模态体上创建带有固定标题的可滚动表格？ [英] how to create a scrollable table with fixed headers on a bootstrap modal body?
本文介绍了如何在引导模态体上创建带有固定标题的可滚动表格？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
> < div class =table-responsive>
< table class =table table-hover>
< thead>
< tr>
...
< / tr>
< / thead>
< tbody style =height：100px; overflow-y：scroll;>
< tr>
...
< / tr>
< / tbody>
< / table>
< / div>
解决方案
HTML
<！ - Large modal - >
< button type =buttonclass =btn btn-primarydata-toggle =modaldata-target =。bs-example-modal-lg>大型模式< / button>
< div class =modal fade bs-example-modal-lgtabindex = - 1role =dialogaria-labelledby =myLargeModalLabel>
< div class =modal-dialog modal-lg>
< div class =modal-content>
< table id =myTableclass =table fix-head table-striped>
< thead>
< tr id =pp>
< th> Column1< / th>
< th> Column2< / th>
< th> Column3< / th>
< th> Column4< / th>
< th> Column5< / th>
< th> Column6< / th>
< th> Column7< / th>
< th> Column8< / th>
< th> Column9< / th>
< / tr>
< / thead>
< tbody style =height：110px>
< tr>
< td> 1< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< / tr>
< tr>
< td> 2< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< / tr>
< tr>
< td> 3< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< / tr>
< tr>
< td> 4< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< / tr>
< tr>
< td> 5< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< / tr>
< tr>
< td> 6< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< / tr>
< tr>
< td> 7< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< / tr>
< tr>
< td> 8< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< td>表格单元< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>
< / div>
CSS
table.fix-head> tbody，table {
display：block;
}
table.fix-head> tbody {
overflow-y：scroll;
height：100px;
}
#pp th {
padding-right：28px;
}
#myTable {
width：100％;
}
JS $（$＃$ $ $ $''$ my $'$'$'$'$'$'$。 （）{
$（this）.find（'。modal-dialog'）。css（{width：'auto'，
height：'auto'，
'max-height' ：'100％'}）;
}）;
}）;
请在这里检查 DEMO ： http://codepen.io/ihemant360/pen/vKjNdm
I try this but this is not working.the fields value are comes dynamically.so the width are not fixed.
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
...
</tr>
</thead>
<tbody style="height:100px;overflow-y:scroll;">
<tr>
...
</tr>
</tbody>
</table>
</div>
解决方案
HTML
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<table id="myTable" class="table fix-head table-striped">
<thead>
<tr id="pp">
<th>Column1</th>
<th >Column2</th>
<th >Column3</th>
<th >Column4</th>
<th>Column5</th>
<th>Column6</th>
<th>Column7</th>
<th>Column8</th>
<th>Column9</th>
</tr>
</thead>
<tbody style="height:110px">
<tr>
<td>1</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>2</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>4</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>5</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>6</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>7</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>8</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS
table.fix-head>tbody, table {
display:block;
}
table.fix-head>tbody {
overflow-y: scroll;
height: 100px;
}
#pp th{
padding-right:28px;
}
#myTable{
width:100%;
}
JS
$(document).ready(function(){
$('#myModal').on('shown.bs.modal', function () {
$(this).find('.modal-dialog').css({width:'auto',
height:'auto',
'max-height':'100%'});
});
});
Check DEMO here : http://codepen.io/ihemant360/pen/vKjNdm
这篇关于如何在引导模态体上创建带有固定标题的可滚动表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
