<html>
<head>
<style type="text/css" mce_bogus="1">
div.tableContainer {
clear: both;
border: 1px solid #963;
height: expression(document.body.clientHeight*0.3);
overflow: auto;
width: 100%;
}
div.tableContainer table {
float: left;
width: 100%
}
thead.fixedHeader tr {
position: relative;
top: expression(document.getElementById("tableContainer").scrollTop)
}
thead.fixedHeader th {
background: #C96;
border-left: 1px solid #EB8;
border-right: 1px solid #B74;
border-top: 1px solid #EB8;
font-weight: normal;
padding: 4px 3px;
text-align: center
}
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
background: #FFF;
border-bottom: 1px solid #EEE;
border-left: 1px solid #EEE;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
padding: 2px 3px
}
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<thead class="fixedHeader">
<tr>
<th>表头 1</th>
<th>表头 2</th>
<th>表头 3</th>
<th>表头 4</th>
<th>表头 5</th>
<th>表头 6</th>
<th>表头 7</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
<td>Cell Content 4</td>
<td>Cell Content 5</td>
<td>Cell Content 6</td>
<td>Cell Content 7</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
<td>More Cell Content 4</td>
<td>More Cell Content 5</td>
<td>More Cell Content 6</td>
<td>More Cell Content 7</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
<td>Even More Cell Content 4</td>
<td>Even More Cell Content 5</td>
<td>Even More Cell Content 6</td>
<td>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>ven More Cell Content 3</td>
<td>Even More Cell Content 4</td>
<td>Even More Cell Content 5</td>
<td>Even More Cell Content 6</td>
<td>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
<tr>
<td nowrap>Even More Cell Content 1</td>
<td nowrap>Even More Cell Content 2</td>
<td nowrap>Even More Cell Content 3</td>
<td nowrap>Even More Cell Content 4</td>
<td nowrap>Even More Cell Content 5</td>
<td nowrap>Even More Cell Content 6</td>
<td nowrap>Even More Cell Content 7</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
<td>And Repeat 4</td>
<td>And Repeat 5</td>
<td>And Repeat 6</td>
<td>And Repeat 7</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
分享到：
相关推荐
为了解决这个问题，"固定table表头的插件"应运而生。这种插件能够保持表头在页面上的固定位置，无论用户如何滚动，表头始终可见，提高了用户的浏览体验。 在HTML中，实现固定表头通常需要CSS和JavaScript的配合。...
"实现Table表头和列固定"的目标就是解决这一问题，保持表头在滚动时始终显示，同时支持多表头和多列固定，确保布局清晰，无错位。 首先，我们需要理解HTML中的`<table>`元素是用于创建表格的基本结构。它由`<thead>...
在这个“asp.net html+table固定表头和左侧列.rar”压缩包中，我们聚焦的是如何在HTML表格（Table）中实现固定表头（Fixed Header）和左侧列（Fixed Left Column）的功能，以便在用户滚动页面时，这些关键信息始终...
当表格数据较多时，会导致表头随内容滚动，影响使用，因此使用jQuery做一个插件，压缩文件中有test.html是一个具体使用的案例，如果不会使用请查看https://blog.csdn.net/qq_28254093/article/details/82844050 文章
首先，我们需要为表头定义一个CSS类，比如这里的.table-head，然后为其设置固定的高度和背景颜色，确保它在视觉上与表格主体（.table-body）有所区分。重要的是，给这个表头添加一个合适的padding-right样式。这个...
"基于jQuery的table表头固定"通常涉及到以下关键技术点： 1. **分离表头和主体**：首先，我们需要将HTML表格的thead部分与tbody部分分离，这样在进行滚动操作时，thead可以独立于tbody进行定位。 2. **CSS定位**：...
在网页设计中，"table的表头固定"是一种常见的需求，尤其在展示大量数据时，保持表头在页面滚动时始终可见，可以帮助用户更好地理解数据列的含义。在这个场景下，我们通常会使用HTML的`<table>`元素来构建表格，并...
总结起来，实现移动端table的固定表头与固定第一列，主要涉及HTML5的表格结构、CSS的定位和层叠上下文以及可能的JavaScript滚动事件处理。通过这些技术，我们能够在移动端提供更好的数据浏览体验。
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能
1. 实现表格的列排序功能（点击表头，切换该列升降序），也可以指定哪一列不排序； 2. 实现当前排序列高亮显示； 3. 实现表格奇偶行不同颜色，即换行变色； 4. 实现表格分页功能，可指定是否开启分页功能及每页行数...
"移动web table固定表头第一列.rar"这个压缩包文件显然是为了解决这些问题，提供了一种在移动端实现固定表头和第一列的解决方案。下面将详细讲解如何在HTML5和CSS3环境下实现这样的功能。 首先，我们需要创建一个...
本文将深入探讨如何使用`table`元素，并结合jQuery实现表头及列的固定，以便在滚动时保持关键信息可见，提高用户体验。 首先，让我们了解`table`的基本结构。一个`table`由`<table>`标签开启，`</table>`标签关闭。...
为了解决这个问题，"JavaScript:固定table的表头"这一技术应运而生，它的目标是确保当用户滚动页面时，表头始终固定在页面顶部，提供清晰的列标识。 实现固定表头的方法多种多样，其中JavaScript是一种常见的解决...
js table 固定表头
"html table 固定表头和列"这个主题就是关于如何在滚动时使HTML表格的表头（thead）和第一列（或列组）始终保持可见。 一、HTML表格基础 在HTML中，`<table>`元素用于创建表格，`<tr>`定义表格行，`<th>`定义表头...
在网页设计中，数据展示经常使用到表格（Table），尤其是数据量大时，为了方便用户浏览，固定表头成为一种常见的需求。固定表头可以使用户在滚动页面时始终保持表头可见，以便清楚地知道每一列对应的数据含义。本文...
为解决这一问题，基于jQuery的固定html table表头/列头插件应运而生，例如本案例中的"jquery.fixedtable.js"。 jQuery是一个强大的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画效果。在jQuery基础上...
本话题将深入探讨如何使用jQuery实现表格添加滚动条的功能，并固定表头，这在处理大量数据时非常有用，因为可以保持表头可见，方便用户在滚动时查看列名。我们将基于提供的"superTables.js"和"superTables"这两个...
table表格固定表头与固定列的源代码，用css样式来设置，只支持ie系统浏览器
为了解决这个问题，可以采用固定表头的方法，即无论用户如何滚动表格，表头始终固定在页面的顶部。 使用CSS固定表格表头的技术可以通过多种实现方式完成。此处提供了两种方法的代码示例，让我们来深入探讨这些技术...