做一排固定的桌子
做一排固定的桌子
提问于 2011-12-27 22:59:58
我有一个HTML表格，我想让第一排固定在我滚动，我可以做固定的标题行，但我也希望我的表的第1排也是固定的。我已经试了两天了，但没有成功。有人遇到过这样的问题吗？
<table>
<thead>
<tr>
<th>Header 1</th><th>Header 2</th> // this i have fixed already
</tr>
</thead>
<tbody>
<tr>....</tr> // this row i want to make fixed while i scroll.
<tr>....</tr>
</tbody>
</table>JSFiddle，直到现在，我是从网上得到这个的
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-12-27 23:33:14
表可以有多个tbody元素，因此可以将此固定行添加到第一个tbody，并将rest行添加到第二个tbody。然后是一些与css的游戏来设置它。
工作演示：http://jsfiddle.net/sMMZ9/4/
演示是基于这个解决方案的
Stack Overflow用户
发布于 2011-12-27 23:21:43
您需要在<thead>元素中插入第一行，并应用与您应用过的th元素相同的css：-
<thead class="fixedHeader">
<tr class="alternateRow">
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>
</tr>
<tr class="normalRow">
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
</thead>CSS
html > body thead.fixedHeader td {
width: 200px;
}您还可以按照您的design.Hope添加边框，这肯定会对您有所帮助。
Stack Overflow用户
发布于 2011-12-27 23:18:46
这是怎么回事
.scrollContent > tr:first-child{
position: fixed;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8652868
复制相关文章
相似问题
无法访问Azure容器服务
WebDriver容器无法访问DockerComposeContainer服务
服务结构容器-无法访问群集内的服务
使用Kubernetes的Azure容器服务-无法访问Internet的容器
Azure容器服务容器无法访问除80以外的其他端口
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
