html - 引导固定表头的表头宽度
问题描述
我试图保持标题固定并滚动正文部分。但我面临着关于表格标题宽度的问题。有没有办法在不分配预定义宽度的情况下解决问题,因为对于长标题,宽度将成为与下一个标题重叠的问题?
.fixed_headers {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
display: block;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table class=" table table-bordered fixed_headers">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Description of it </th>
<th>Name</th>
<th>Color</th>
<th>Description</th>
<th>Name</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
<td>These are red.These are red.</td>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
</tbody>
</table>
解决方案
推荐阅读
- php - laravel 数据库存在检查
- python - 从具有同名字段的字典列表中删除键值对
- javascript - 将 Object.entries reduce 转换为泛型类型
- javascript - 创建 chrome 扩展时是否可以链接多个 html 文件?(或使用一个 html 文件创建子页面)
- jquery - 使用 $.get 从另一个页面上的特定 div 导入内容并将它们插入到 2 个 div
- javascript - 在指针向下时检测 div 外的指针移动事件
- amazon-web-services - Terraform For 循环返回对象为空
- c++ - C++ - 如何读取由 ofstream::binanry 保存的文件
- ios - 如何在使用`layoutAttributesForElements`时为集合视图布局更改设置动画?
- ios - .task 崩溃 - Swift 5.5 (iOS 15 Beta 5)