我有一个带有水平和垂直滚动的表格，其中标题是固定的。由于我使用的是固定标头，因此会为标头生成克隆，因此无法调整大小。我还需要调整表格列的大小。请帮帮我...
【问题讨论】：
我没有看到有人提到 DataTables.net 插件，因为它有一些适用于这些情况的插件。它是完全可定制和可扩展的。
由于某种原因，我的 jsfiddle 向我显示了我无法调试的错误，但是当在这里使用 xammp 进行尝试时，它工作得很好，并呈现了分页、列排序和固定标题示例。你可以看到初始化代码很短，但您可能需要下载图像的 de 代码库。我基本上采用了您提供的代码元素并将其安排为应用 DataTables.net jQuery 插件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
TEST DataTables.net plugin - Fixed Header example
</title>
<script src='jquery182.js' ></script>
<script src='jquery.dataTables.js' ></script>
<script src='FixedHeader.js' ></script>
<link rel='stylesheet' href='demo_table.css'/>
<link rel='stylesheet' href='demo_page.css'/>
</head>
<body>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display data_Table" >
<thead>
<tr>
<th style='width:47px; height:29px' >
<input name="chkSelectAll" type="checkbox" value="" id="chkSelectAll"/></th>
<th style='width:159px;font-weight:bold'>Computer <span class="actdiv"> </span></th>
<th style='width:105px;font-weight:bold'>Group <span class="actdiv"> </span></th>
<th style='width:97px;font-weight:bold'>Policy <span class="actdiv"> </span></th>
<th style='width:105px;font-weight:bold'>Domain <span class="actdiv"> </span></th>
<th style='width:126px;font-weight:bold'>Address<span class="actdiv"> </span></th>
<th style='width:127px;font-weight:bold'>Type <span class="actdiv"> </span></th>
<th style='width:109px;font-weight:bold'>Status <span class="actdiv"> </span></th>
<th style='width:181px;font-weight:bold'>Test Status <span class="actdiv"> </span></th>
<th style='width:165px;font-weight:bold'>Version <span class="actdiv"> </span></th>
<th style='width:131px;font-weight:bold'>Date <span class="actdiv"> </span></th>
<th style='width:160px;font-weight:bold'>Last Date <span class="actdiv"> </span></th>
<th style='width:173px;font-weight:bold'>Count </th>
</tr>
</thead>
<tbody>
<tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr><tr style="padding-left:10px">
<td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td>
<td class="name">DEVBUILD1</td>
<td class="groupId">test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr> </tbody>
</table>
</div>
<script>
jQuery(document).ready(function($){
var oTable = $('.data_Table').dataTable( {
// "sDom": 'RC<"clear">lfrtip'
//options: we are using
"sDom": 'Rlfrtip',
"sScrollY": "200px",
"bPaginate": true //Disable pagination false
} );
});
</script>
</body>
</html>
如果您在该 jsfiddle 的 HTML 部分获取源代码，并从该 jsfiddle 链接下载依赖项（javascript 和 css 文件，并将此 html 放在同一目录中），它应该让您立即开始使用它。
虽然，根据您可能想要查看的选项，您是否决定使用这个 jQuery 插件，请记住，它有一个非常活跃的社区和支持，在论坛上，开发人员应该是掌握具体细节的大师。
根据您希望如何使用此插件显示数据，可以帮助您的有趣链接是：
http://www.datatables.net/release-datatables/extras/FixedHeader/two_tables.html
http://www.datatables.net/release-datatables/extras/FixedHeader/index.html
http://www.datatables.net/release-datatables/extras/FixedHeader/html_table.html
http://www.datatables.net/release-datatables/extras/ColReorder/scrolling.html
http://www.datatables.net/release-datatables/extras/ColReorder/fixedheader.html
http://www.datatables.net/release-datatables/extras/ColReorder/fixedcolumns.html
正如您在http://www.datatables.net/examples/ 看到的那样，示例列表很长，但希望对您有所帮助！
【讨论】：
**用于处理表格或基于表格的内容的有用 jQuery 插件 **（包括可调整大小的列和固定标题）
jQuery DataTables table-plugin（参见 Jean Paul 的回答；））
2015 年 10 月 28 日：已编辑，因为有一个链接不可用以供将来参考。
【讨论】：
编辑：对于可调整大小的列和固定标题，试试这个插件http://www.tablefixedheader.com/fullpagedemo/，它可以让你调整标题和列的大小。
我最近为固定标题列表编写了一个插件。这基本上是为了解决可滚动表格的问题，其中标题和列在滚动时会消失。
查看插件演示页面@Git：http://meetselva.github.com/fixed-table-rows-cols/
以及您的 HTML 的完整页面演示：http://jsfiddle.net/ryB2n/4/embedded/result/
演示：http://jsfiddle.net/ryB2n/4/
此插件还支持可以使用fixedCols 选项配置的固定列。请注意，它只是一个可选配置，因此如果没有该选项，则会为您呈现固定的标题表。
注意：我仍在开发该插件以处理异常情况和其他功能，因此请谨慎使用。
【讨论】：
您可能想看看这个网站：http://bz.var.ru/comp/web/resizable.html 那里有一个可调整大小的列脚本，您可以在代码中提取和实现它。
【讨论】：
@Luv / 不确定我是否完全理解您对 excel.exe 的引用与您问题中描述的使用鼠标拖动场景调整大小，但我会尝试用迄今为止我能够处理的内容来回应到 DataTables 以及浏览其网站时的一些阅读和注意事项 (http://www.datatables.net)
有一个非常酷的插件（我自己还没有尝试过），它允许您执行 CRUD（创建-读取-更新-删除编程循环。如果您正在使用一些本地存储或基于数据库的保存您的应用程序数据的方法）此外，我真的无法猜测您最终的目标是哪个功能，这里有一些想法需要考虑：
DataTables 付费插件（编辑器插件）
http://editor.datatables.net/release/DataTables/extras/Editor/examples/events_keySubmit.html
如果我没记错的话，许可证的成本大约是 15 美元，但它内置了一堆准备好用于 CRUD 开发的 api，这看起来真的很酷.. 我认为它使用了某种 Facebook 模态窗口打开在触发事件上。值得一试！
如果你想内联编辑 DataTables，我认为有一个插件可以做到这一点
http://datatables.net/release-datatables/examples/api/editable.html
（由 Allan Jardine 创建的 dataTables 似乎得到了社区的大力支持，我建议如果您打算使用它进行开发，您应该成为他们论坛的常客，或者向 Allan 发布问题，就好像您正在寻找的所需功能已针对他有趣工作的当前稳定版本开发）。
另一方面，如果您正在寻找的是将列宽编辑为 jQuery UI 可调整大小的方法，我相信您需要挂钩函数 redraw，并编写类似此示例的自定义扩展：
http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html
此外，您可能有兴趣查看：(http://jqueryui.com/resizable/) 以了解有关如何对 fnReDraw 上的列进行原型改造的更多信息（当我们使用排序或过滤来自数据表的选项）与一些链式事件编程。
我没有尝试过这个，但它可以作为最后的手段......快乐编码;）
【讨论】：
只需使用下面的代码行即可。
$(window).on('resize', function () { $('.fixedHeader').remove(); new $.fn.dataTable.FixedHeader(table); });
【讨论】：