我尝试了这个，但这不起作用。字段值是动态变化的。所以宽度不固定。
<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这里 ：http://codepen.io/ihemant360/pen/vKjNdm http://codepen.io/ihemant360/pen/vKjNdm
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
