javascript - 仅 CSS 固定表头,没有表头,只有 td 和 tr
问题描述
我一直在尝试创建一个带有表头的粘性表头,只有第一个 tr 会有粘性头,任何人都可以只用 CSS 提供帮助吗?请使用这个小提琴来修复,而不是下表 https://jsfiddle.net/x243jqbg/
<table class="table">
<tbody>
<tr>
<td>row 1</td>
<td>row 2</td>
<td>row 3</td>
<td>row 4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
解决方案
您可以使用tr:first-child
选择器来定位第一行。然后相应地对其进行样式设置。
.table {
position: relative;
}
tr:first-child td {
top: 0;
position: sticky;
background: lightblue;
}
<table class="table">
<tbody>
<tr>
<td>row 1</td>
<td>row 2</td>
<td>row 3</td>
<td>row 4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
推荐阅读
- reactjs - AADSTS700016 租户目录错误的 Adal 问题
- javascript - javascript中缺少打字稿声明文件
- android - 如何在水平平面列表中显示箭头以指示存在不可见的滚动视图内容
- php - 连接到php本地服务器时-t fileName选项中的-t是什么意思
- pytorch - 无法在 PyTorch 中规范化张量
- batch-file - 在所有子目录上工作所需的修改
- python - 决策树类型错误:“float”和“str”实例之间不支持“<”
- redmine - 我无法在 Redmine 4.0.2 上通过电子邮件创建问题
- python - Google App Engine,不支持 urllib3 和 requests 吗?
- javascript - 如何将反应组件中的css文件作为原始文本导入?