html - 引导表宽度填充屏幕 - thymeleaf/springboot
问题描述
我在我的 html thymeleaf 模板中使用引导程序,如下所示:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous">
<table class="table table-striped table-sm" >
<thead>
<th>delete</th>
<th>Edit</th>
<th>Consult Date</th>
<th>Reservation Number</th>
<th>dispense details</th>
表格被拉伸到我的屏幕宽度。如何让表格使用 50-60% 的屏幕宽度?
解决方案
利用BS 网格并将表格放在一列内。网格中有 12 列,因此 50-60% 的屏幕宽度使用.col-6
(6/12 = 50%)、.col-7
(7/12 = 58.333%) 或其响应变体之一。
在下面的示例中,我使用.col-sm-7
so 它将在超小屏幕上占用所有 12 列,然后在小屏幕和更大屏幕上仅占用 7 列。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-7">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>delete</th>
<th>Edit</th>
<th>Consult Date</th>
<th>Reservation Number</th>
<th>dispense details</th>
</tr>
</thead>
<tbody>
<tr>
<td>yup</td>
<td>yup</td>
<td>yup</td>
<td>yup</td>
<td>yup</td>
</tr>
<tr>
<td>yup</td>
<td>yup</td>
<td>yup</td>
<td>yup</td>
<td>yup</td>
</tr>
<tr>
<td>yup</td>
<td>yup</td>
<td>yup</td>
<td>yup</td>
<td>yup</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
推荐阅读
- javascript - quilljs copyCode 模块 - 无法在“节点”上执行“insertBefore”
- javascript - 用 2 列迭代一行
- json - 如何在 Python 中将 JSON 的文本文件转换为 JSON 数组?
- python - 在表上的简单计算。请帮助我使我的代码更有效
- scheme - 如何设计一个从给定列表中的每个数字中减去 2 的函数?
- kotlin - Kotlin,内在数据类型的未解决参考
- angular - 从 BehaviorSubject 中检索多个动态创建的组件的值
- xcode - 如何在 xcode 12.2 中退出“历史编辑器”模式?
- vue.js - 在同一个 div vue.js 中显示 2 个元素
- c - 为什么我在 C 中得到这个双重释放或损坏的回溯错误?