冻结/固定表格的顶部标题行
闻人宏盛
问题内容：
问题答案：
在此处输入图片说明我需要你的帮助。我不确定如何冻结表或表的第一行，其中包含要冻结的标题，而我却可以滚动表？仅使用CSS标记而不使用Javascript框架，我将如何实现这一目标？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border:#ccc 1px solid;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
min-width: 1000px;
}
table th {
padding:10px 10px 10px 10px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-top-left-radius:3px;
border-left: 0;
}
table tr:first-child th:last-child {
border-top-right-radius:3px;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
width: 160px;
}
#wrapper {
width: 740px;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
}
table thead {
position: fixed;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create pretty table design</td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog for a walk</td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half the day on Twitter</td>
<td> </td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>Feel inferior after viewing Dribble</td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Wince at "to do" list</td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>Vow to complete personal project</td>
<td> </td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
<td> </td>
<td> </td>
<td>80%</td>
<td><a href="#inexistent-id">Another</a></td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
问题答案：
将以下内容添加到CSS中。
table thead {
position: fixed;
}
试试这个代码
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border:#ccc 1px solid;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:10px 10px 10px 10px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-top-left-radius:3px;
border-left: 0;
}
table tr:first-child th:last-child {
border-top-right-radius:3px;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
width: 160px;
}
#wrapper {
width: 740px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
table thead
{
position:fixed;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create pretty table design</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog for a walk</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half the day on Twitter</td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>Feel inferior after viewing Dribble</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Wince at "to do" list</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>Vow to complete personal project</td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
<td> </td>
<td>80%</td>
<td><a href="#inexistent-id">Another</a></td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
类似资料：
-
问题内容： 我想制作一个冻结顶部行的html表（因此，当您垂直向下滚动时，总是可以看到它）。 有没有使这种情况发生的聪明方法，而无需使用javascript？ 请注意，我不需要冻结左列。 问题答案： 如果没有JavaScript，您将无法有效实现这一目标……特别是如果您想要跨浏览器支持。 您采取的任何方法都有很多问题，特别是关于跨浏览器/版本支持的问题。 编辑： 即使不是您要修复的标头，而是数据的
-
问题内容： 引导布局。桌子上有很多行。 问题？ 当我滚动页面导航栏将在那里，因为它是固定的。当我滚动更多时，我希望将表标题固定在导航栏中，并且table（table-body）的内容滚动而没有滚动条！ HTML 问题答案： $(document).ready(function(){ $(“.sticky-header”).floatThead({top:50}); }); 具有2个表和固定标题的D
-
我有一个标题，占据了整个屏幕。 每次应用程序进入后台，然后回到前台/活动，我希望屏幕被设置回标题顶部。 我只见过与滚动到表格顶部有关的答案，这些答案使用类似于，但是不起作用，因为它只滚动回UITableView的第0行0，而不是UITableView标题的顶部。 有什么想法吗？ 谢谢 编辑：尝试了这个 下面是一些值得注意的表格设置代码：
-
问题内容： 是否有跨浏览器的CSS / JavaScript技术来显示较长的HTML表，以使列标题在屏幕上保持固定并且不随表主体滚动。考虑一下Microsoft Excel中的“冻结窗格”效果。 我希望能够滚动浏览表的内容，但始终能够看到顶部的列标题。 问题答案： 一段时间以来，我一直在寻找解决方案，但发现大多数答案都不起作用或不适合我的情况，因此我用jQuery写了一个简单的解决方案。 这是解决
-
我有一个解决方案，通过它，我可以使用minor jQuery和CSS创建带有固定页眉/页脚的可滚动表，但我正在寻找一种方法，使其成为唯一一个跨浏览器兼容的CSS解决方案。 明确地说，我想要做的是只使用一个标记（它是有效的子标记，，，，，，，，），但采用一组满足以下条件的CSS规则： 必须在页眉/页脚/内容行之间保持列对齐 必须允许页眉/页脚在内容垂直滚动时保持固定 必须不需要任何jQuery或其他
-
我有一个div类，这个类与一个小的JavaScript函数相关联，它将使div显示为全屏。"也就是说，的宽度和高度将是100%”。 因此，高度和宽度不是固定的，它是根据窗口的缩小动态计算的。 在该div下，还有另一个具有ID标头“导航栏”的标头，标头最初相对定位在div.fullscreen-然而，我试图将其定位为固定，当#标头的顶部到达顶部时浏览器窗口。 所以这里是我正在玩的，它切换固定的风格，