在表上有一个粘贴的标题确实是一件棘手的事情。我有相同的要求，但使用asp：GridView，然后我真的发现它确实在gridview上具有粘性标头。有许多解决方案可用，我花了3天的时间尝试所有解决方案，但没有一个可以满足。
我在大多数这些解决方案中面临的主要问题是对齐问题。当您尝试使标头浮动时，标头单元格和主体单元格的对齐会偏离轨道。
通过一些解决方案，我还遇到了使标题与主体的前几行重叠的问题，这导致主体行隐藏在浮动标题的后面。
因此，现在我必须实现自己的逻辑来实现这一目标，尽管我也不认为这是完美的解决方案，但这对某人也可能会有帮助，
下面是示例表。
<div class="table-holder">
<table id="MyTable" cellpadding="4" cellspacing="0" border="1px" class="customerTable">
<thead>
<tr><th>ID</th><th>First Name</th><th>Last Name</th><th>DOB</th><th>Place</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>Customer1</td><td>LastName</td><td>1-1-1</td><td>SUN</td></tr>
<tr><td>2</td><td>Customer2</td><td>LastName</td><td>2-2-2</td><td>Earth</td></tr>
<tr><td>3</td><td>Customer3</td><td>LastName</td><td>3-3-3</td><td>Mars</td></tr>
<tr><td>4</td><td>Customer4</td><td>LastName</td><td>4-4-4</td><td>Venus</td></tr>
<tr><td>5</td><td>Customer5</td><td>LastName</td><td>5-5-5</td><td>Saturn</td></tr>
<tr><td>6</td><td>Customer6</td><td>LastName</td><td>6-6-6</td><td>Jupitor</td></tr>
<tr><td>7</td><td>Customer7</td><td>LastName</td><td>7-7-7</td><td>Mercury</td></tr>
<tr><td>8</td><td>Customer8</td><td>LastName</td><td>8-8-8</td><td>Moon</td></tr>
<tr><td>9</td><td>Customer9</td><td>LastName</td><td>9-9-9</td><td>Uranus</td></tr>
<tr><td>10</td><td>Customer10</td><td>LastName</td><td>10-10-10</td><td>Neptune</td></tr>
</tbody>
</table>
</div>
注意：表被包装到DIV中，其类属性等于“ table-holder”。
以下是我在html页面标题中添加的JQuery脚本。
<script src="../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//create var for table holder
var originalTableHolder = $(".table-holder");
// set the table holder's with
originalTableHolder.width($('table', originalTableHolder).width() + 17);
// Create a clone of table holder DIV
var clonedtableHolder = originalTableHolder.clone();
// Calculate height of all header rows.
var headerHeight = 0;
$('thead', originalTableHolder).each(function (index, element) {
headerHeight = headerHeight + $(element).height();
});
// Set the position of cloned table so that cloned table overlapped the original
clonedtableHolder.css('position', 'relative');
clonedtableHolder.css('top', headerHeight + 'px');
// Set the height of cloned header equal to header height only so that body is not visible of cloned header
clonedtableHolder.height(headerHeight);
clonedtableHolder.css('overflow', 'hidden');
// reset the ID attribute of each element in cloned table
$('*', clonedtableHolder).each(function (index, element) {
if ($(element).attr('id')) {
$(element).attr('id', $(element).attr('id') + '_Cloned');
}
});
originalTableHolder.css('border-bottom', '1px solid #aaa');
// Place the cloned table holder before original one
originalTableHolder.before(clonedtableHolder);
});
</script>
最后，下面是用于着色目的的CSS类。
.table-holder
{
height:200px;
overflow:auto;
border-width:0px;
}
.customerTable thead
{
background: #4b6c9e;
color:White;
}
因此，此逻辑的整体思想是将表放入表持有人div中，并在页面加载时在客户端创建该持有人的克隆。现在，将表主体隐藏在克隆持有人内部，并将剩余的标题部分定位到原始标题上。
同样的解决方案也适用于asp：gridview，您需要再添加两个步骤才能在gridview中实现此目标，
在网页中的gridview对象的OnPrerender事件中，将标题行的表部分设置为等于TableHeader。
if (this.HeaderRow != null)
{
this.HeaderRow.TableSection = TableRowSection.TableHeader;
}
然后将您的网格包装成<div class="table-holder"></div>。
注意：如果标题具有可单击的控件，则可能需要添加更多jQuery脚本，以将克隆的标题中引发的事件传递给原始标题。此代码已在jmosbech创建的jQuery粘滞头插件中可用