javascript - 在 Bootstrap 模式中调整表格内容的大小
问题描述
我使用 Bootstrap 制作了一个简单的模式,以允许用户查看表格内容。但是,我在尝试将表格内容保留在模式中时遇到问题。
当我减小网站/模态的大小时,表格内容将超出模态。有什么办法可以让用户滚动以便他们可以看到里面的所有表格内容?
这是我的JSFiddle代码:
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#complex">Button</button>
<div class="modal fade" id="complex" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">Test</h4>
</div>
<div class="modal-body">
<table id="example" class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>ID Number</th>
<th>Proband</th>
<th>Gender</th>
<th>Birth Date</th>
<th>Life Status</th>
<th>Phenotype</th>
<th>Genotype</th>
<th> </th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
解决方案
如果你想在你的模态容器上滚动,那么你只能使用 css。在这里寻找小提琴:http: //jsfiddle.net/oq0xLmz2/
.modal-body {
overflow : auto;
}
推荐阅读
- python - 使用 boto3 根据 lastModified 时间列出 S3 文件
- php - Flutter - XMLHttpRequest 已被 CORS 策略阻止
- python - 将tinyurl重定向到原始url时找不到服务器,地址栏中只显示slug
- aws-lambda - 是否可以使用 API 网关触发不同版本的 lambda,具体取决于消息上下文
- join - 如何在一个 Gremlin 查询中获取两个或多个顶点的属性?
- javascript - 按字母顺序排序,然后是 NodeJS 中的符号
- powershell - Powershell webinvoke 与 Google Script webapp
- kubernetes - 垂直吊舱自动缩放器“自动”模式有什么用
- wordpress - 在 ACF/Wordpress 中添加灵活内容的设置
- ruby - 根据rails中id数组顺序上的字段值对记录进行排序