<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>带滚动条的表格 - scroll table</title>
</head>
<style type="text/css">
table {
border-collapse:collapse;
border:0;
width:auto;
table-layout:fixed;
}
.dd {
height:150px; /* set height here for ie */
width:600px;
overflow-y: auto;
}
.dd thead {
display:block;
background-color:red; /* firefox needs a background color */
}
.dd thead tr {
position: relative;
}
</style>
<body>
<div class="dd">
<TABLE border=1>
<thead>
<TR>
<Th>Mapping 公式</th>
<th>计算顺序</th>
<th>LNE-S001</th>
<th>LNE-S002</th>
<th>LNE-S003</th>
<th>LNE-S004</th>
<th>LNE-S005</th>
</TR>
</thead>
<TR>
<TD>LNE-F001</TD>
<td><input type="text" SIZE=8></input></td>
<TD><input type="radio" name="S1"></input></TD>
<TD><input type="radio" name="S1"></input></TD>
<TD><input type="radio" name="S1"></input></TD>
<TD><input type="radio" name="S1"></input></TD>
<TD><input type="radio" name="S1"></input></TD>
</TR>
<TR>
<td>LNE-F002</td>
<td><input type="text" SIZE=8 ></input></td>
<TD><input type="radio" name="S6"></input></TD>
<TD><input type="radio" name="S6"></input></TD>
<TD><input type="radio" name="S6"></input></TD>
<TD><input type="radio" name="S6"></input></TD>
<TD><input type="radio" name="S6"></input></TD>
</TR>
<TR>
<TD>LNE-F003</TD>
<td><input type="text" SIZE=8 ></input></td>
<TD><input type="radio" name="S2"></input></TD>
<TD><input type="radio" name="S2"></input></TD>
<TD><input type="radio" name="S2"></input></TD>
<TD><input type="radio" name="S2"></input></TD>
<TD><input type="radio" name="S2"></input></TD>
</TR>
<TR>
<TD>LNE-F004</TD>
<td><input type="text" SIZE=8 ></input></td>
<TD><input type="radio" name="S3"></input></TD>
<TD><input type="radio" name="S3"></input></TD>
<TD><input type="radio" name="S3"></input></TD>
<TD><input type="radio" name="S3"></input></TD>
<TD><input type="radio" name="S3"></input></TD>
</TR>
<TR>
<TD>LNE-F005</TD>
<td><input type="text" SIZE=8 ></input></td>
<TD><input type="radio" name="S4"></input></TD>
<TD><input type="radio" name="S4"></input></TD>
<TD><input type="radio" name="S4"></input></TD>
<TD><input type="radio" name="S4"></input></TD>
<TD><input type="radio" name="S4"></input></TD>
</TR>
<TR>
<TD>LNE-F006</TD>
<td><input type="text" SIZE=8 ></input></td>
<TD><input type="radio" name="S5"></input></TD>
<TD><input type="radio" name="S5"></input></TD>
<TD><input type="radio" name="S5"></input></TD>
<TD><input type="radio" name="S5"></input></TD>
<TD><input type="radio" name="S5"></input></TD>
</TR>
</TABLE>
</div>
<label>需要注意表格的头，必须在滚动时保持不动！</label>
</BODY>
</HTML>
分享到：
相关推荐
标题“div模拟table滚动时表头固定，兼容ie6”正是针对这一需求，描述了如何使用div元素来模拟表格的滚动，并确保在滚动过程中表头能够固定显示，同时实现列宽的自动适配，使得表头边框与表体边框对齐。 在传统的...
HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将...
同时，需要确保表体部分的滚动不影响表头，这可能需要一些额外的CSS样式调整。 ```css thead { position: fixed; top: 0; width: 100%; } tbody { overflow-y: auto; height: 300px; /* 根据实际需求设定 */ ...
首先，我们需要理解问题的核心在于当表格内容超过可视区域时，只有tbody部分可以滚动，而thead部分固定不动。为了解决这个问题，我们可以采用一种分层的方法，将表头和内容分开处理。 步骤如下： 1. 创建两个 ...
首先，我们需要创建两个独立的div，一个用于固定横向表头，另一个用于固定纵向表头。然后，通过JavaScript监听滚动事件，动态调整这两个div的位置，以保持它们在可视区域内。 例如，我们可以使用以下步骤： 1. **...
2. 接着，我们给这个div添加CSS样式，设置`position: fixed`，这将使它始终固定在屏幕的一个位置，不随滚动条移动。 3. 使用`top`和`left`属性调整固定表头的位置。例如，如果表头位于页面顶部，我们可以设置`top: 0...
在JavaScript（JS）中，冻结表头和列是一项常见的需求，特别是在处理大数据表格时，保持表头固定不动以便用户能够更容易地浏览和理解表格内容。本文将深入探讨如何实现这一功能，同时也会提及一些相关工具和源码示例...
1. **分离表头和主体**：将表格的表头部分和主体部分分别包装成两个独立的div元素，分别设置它们的CSS样式。表头部分设置为固定定位，使其始终在屏幕顶部显示。 2. **监听滚动事件**：使用JavaScript的`...
- **用户体验**：隐藏表头复选框可能会影响到用户的使用习惯，建议在不影响整体功能的前提下进行适当的设计调整。 #### 结语 通过上述步骤，我们成功实现了隐藏LayUI数据表格表头的复选框的功能。这种方法不仅简单...
// #theadDiv是包裹表头的div，设置其top值 }); ``` 这只是一个基础的实现，实际应用中可能还需要考虑更多细节，比如响应式布局、不同浏览器的兼容性问题等。在实际项目中，可以进一步优化这个功能，例如添加平滑...
在大型数据集的情况下，可以实现自定义分页和滚动逻辑，只加载当前视图的数据，同时保持表头不动。这种方法需要编写更多的服务器端和客户端代码，但可以提供更好的性能。 5. **使用jQuery插件**： 有一些jQuery...
但需要注意的是，`table.reload()`方法并不直接支持动态改变表头字段，因此我们需要采用其他方式来实现这一需求。 在Layui中，要实现动态改变表头并重新加载表格，我们可以采用以下步骤： 1. 定义表格的数据源以及...
为了提高用户体验，在滚动查看数据时保持表头固定不动是一个常见且实用的功能。本篇文章将根据提供的代码示例，深入探讨如何实现在表格滚动时锁定表头，并特别关注解决当向右滚动后再上下滚动时，右侧选择框未被表头...
总之，实现固定表头的表格有多种方法，包括纯CSS、JavaScript辅助和使用div布局。选择哪种方法取决于项目需求、浏览器兼容性和性能考虑。在实际开发中，可以结合使用这些技术，以创建出既美观又实用的数据展示界面。
1. 创建独立的容器：将表头和表尾分别放入两个独立的div容器中，这样可以独立控制它们的样式和位置。 2. 固定定位（position: fixed）：利用CSS的`position`属性，设置表头和表尾为`fixed`，使其脱离正常文档流，...
然而，当表格数据过多时，滚动查看会使得表头和特定列难以保持可见，影响用户的阅读体验。为了解决这个问题，"jquery表头固定、列固定完美解决方案"应运而生。这个方案结合了jQuery库和自定义的JavaScript插件，旨在...
在展示大量数据时，滚动表格是不可避免的操作。然而，当用户滚动到表格下方时，表头往往会随之消失，导致用户难以识别每一列的数据含义，降低了用户体验。为了解决这个问题，“gridview固定表头”应运而生，它通过将...
在网页设计中，创建带有斜线的表格表头...这种方法灵活且易于适应不同的表头布局，使得在不使用图片或CSS伪元素的情况下也能实现复杂的表头设计。在实际项目中，你可以根据需要调整这个示例，以适应不同的需求和样式。
但这种方法不适用于现代浏览器，因此建议使用JavaScript或其他CSS技巧进行替代。 - **JavaScript方法**：通过监听滚动事件，动态更新表头的位置。 - **CSS Flexbox或Grid布局**：利用现代CSS布局特性实现更加简洁...
- `scrollContainer`: 指定表格所在的滚动容器，如果表格本身不具有滚动条，可以设置为包含表格的div元素。 - `zIndex`: 设置冻结部分的z-index值，以确保其始终位于其他元素之上。 此外，插件可能还提供了其他高级...