html - 创建具有非滚动列标题的 CSS 网格
问题描述
我想使用纯 CSS 网格设计来创建一个类似表格的显示,其中每一列在顶行中都有一个“标题”单元格,该单元格不滚动(在 y 中),而网格的主体将滚动。
这是一个(非工作)示例 HTML 作为起点,其中一些符号表示我想要的结果:
<style>
.main-view {
display: flex;
flex-direction: column;
overflow: auto;
height: 8rem;
}
.grid-body {
display: grid;
grid-template-columns: max-content max-content 1fr;
row-gap: 0.1rem;
column-gap: 0.5rem;
height: 8rem;
margin: 0.5rem;
border: solid 1px red;
overflow: auto;
}
.grid-header {
display: contents;
}
.grid-content {
display: contents;
}
.grid-header label {
font-weight: bold;
text-align: center;
background-color: lightgray;
border-bottom: solid 1px black;
}
.grid-content label {
text-align: center;
height: 3rem;
background-color: lightblue;
}
</style>
<div class="main-view">
<div class="grid-body">
<div class="grid-header">
<label>Header A</label>
<label>Header B</label>
<label>Header C</label>
</div>
<div class="grid-content">
<label>Want header rows</label>
<label>above this body row</label>
<label>NOT to scroll but have correct column widths</label>
<label>Cell Label 01</label>
<label>Cell Label 02</label>
<label>Cell Label 03</label>
<label>Cell Label 04</label>
<label>Cell Label 05</label>
<label>Cell Label 06</label>
<label>Cell Label 07</label>
<label>Cell Label 08</label>
<label>Cell Label 09</label>
<label>Cell Label 10</label>
<label>Cell Label 11</label>
<label>Cell Label 12</label>
</div>
</div>
</div>
所以,基本上,我希望 grid-header 元素具有粘性,而 grid-content 元素可以滚动。但是,我不知道如何设置这些元素的样式来实现这一点。
如果这不能用纯 CSS 完成,我不介意使用纯 JavaScript 代码来创建效果(例如,使用两个堆叠网格并在底部网格列宽发生变化时修改顶部网格的列宽)。
谢谢!
解决方案
position: sticky;
使用和设置网格标题标签的样式top: 0
。
<style>
.main-view {
display: flex;
flex-direction: column;
overflow: auto;
height: 8rem;
}
.grid-body {
display: grid;
grid-template-columns: max-content max-content 1fr;
row-gap: 0.1rem;
column-gap: 0.5rem;
height: 8rem;
margin: 0.5rem;
border: solid 1px red;
overflow: auto;
}
.grid-header {
display: contents;
}
.grid-content {
display: contents;
}
.grid-header label {
position: sticky;
top:0%;
font-weight: bold;
text-align: center;
background-color: lightgray;
border-bottom: solid 1px black;
}
.grid-content label {
text-align: center;
height: 3rem;
background-color: lightblue;
}
</style>
<div class="main-view">
<div class="grid-body">
<div class="grid-header">
<label>Header A</label>
<label>Header B</label>
<label>Header C</label>
</div>
<div class="grid-content">
<label>Want header rows</label>
<label>above this body row</label>
<label>NOT to scroll but have correct column widths</label>
<label>Cell Label 01</label>
<label>Cell Label 02</label>
<label>Cell Label 03</label>
<label>Cell Label 04</label>
<label>Cell Label 05</label>
<label>Cell Label 06</label>
<label>Cell Label 07</label>
<label>Cell Label 08</label>
<label>Cell Label 09</label>
<label>Cell Label 10</label>
<label>Cell Label 11</label>
<label>Cell Label 12</label>
</div>
</div>
</div>
推荐阅读
- c++ - 下划线 QTextEdit C++ 中的特定行
- android - 这些是功能需求的例子吗?
- unit-testing - 模拟具有链式方法的 SDK 客户端
- sed - 在 LINUX/BASH 中首次出现特定模式之前插入文件内容
- java - 如何获取内部子值 Firebase?
- sed - sed 变量增量
- javascript - 材质组件web组件mwc-按钮上传文件
- python - 创建 Python 管道以转换数据
- dpdk - 如何修复 dpdk 构建错误:“需要 isa 选项 -m32 -mssse3”
- css - 在 Visual Studio 2019 中编辑 CSS 文件时,有没有办法查看类是否是媒体查询的一部分?