css - 如何为具有自定义列宽的可滚动表完成固定标题?
问题描述
我尝试修复具有自定义列宽的可滚动表的标题。
当我将 tbody 转为块标记时,标题列和正文列彼此不匹配。
你可以从这支笔看到例子
https://codepen.io/engtuncay/pen/Oqayod
Html Part有一个div,在这个div中,有一个表格,我在col标签中定义了列大小。
.tableDiv{
height:150px;
overflow-y:scroll;
padding:10px;
}
.fixed_header{
width: 100%;
table-layout: fixed;
}
<div class="tableDiv">
<table class="fixed_header">
<thead>
<colgroup>
<col style="width:70px">
<col style="width:150px">
<col>
<col>
<col>
</colgroup>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1-0</td>
<td>row 1-1</td>
<td>row 1-2</td>
<td>row 1-3</td>
<td>row 1-4</td>
</tr>
<tr>
<td>row 2-0</td>
<td>row 2-1</td>
<td>row 2-2</td>
<td>row 2-3</td>
<td>row 2-4</td>
</tr>
<tr>
<td>row 3-0</td>
<td>row 3-1</td>
<td>row 3-2</td>
<td>row 3-3</td>
<td>row 3-4</td>
</tr>
<tr>
<td>row 4-0</td>
<td>row 4-1</td>
<td>row 4-2</td>
<td>row 4-3</td>
<td>row 4-4</td>
</tr>
<tr>
<td>row 5-0</td>
<td>row 5-1</td>
<td>row 5-2</td>
<td>row 5-3</td>
<td>row 5-4</td>
</tr>
<tr>
<td>row 6-0</td>
<td>row 6-1</td>
<td>row 6-2</td>
<td>row 6-3</td>
<td>row 6-4</td>
</tr>
<tr>
<td>row 7-0</td>
<td>row 7-1</td>
<td>row 7-2</td>
<td>row 7-3</td>
<td>row 7-4</td>
</tr>
</tbody>
</table>
</div>
谢谢
解决方案
您可以将标题的位置设置为固定。我正在编写示例布局。
<div style="display:flex;justify-content:space-between;">
<div style="display:inline-block;"><!-- this will contain single column-->
<div style="position:fixed;top:0px;left:0px;">
Col1
</div>
推荐阅读
- arrays - 使用 numpy 将某些行添加到数组
- javascript - jsonwebtoken, jwt 在提供无效令牌时使我的应用程序崩溃,即使 errorHandler 中间件捕获了错误
- json - 在反应的json数组中动态添加和切换showmore/less
- angular - 如何处理来自 api 响应的数据,然后以角度同步返回布尔值?
- python - Gensim Word2Vec 嵌入而不是 GloVe 类型错误:字符串格式化期间并非所有参数都转换
- javascript - 如何在 Jest 中模拟 AbortController
- catel - 无法在 .Net Framework 4.7 项目中安装 Orc.Controls
- json - 将 json 对象与 jq 连接起来
- r - 使用循环对 r 中的多个数据集进行子集化
- python - 为什么 fig.update_layout 的 `title_text` 参数似乎不适用于 Jupyter 中的 Plotly 表?