【发布时间】：2014-08-02 19:38:00
【问题描述】：
有很多关于这个问题的主题，我已经浏览了它们，但是在我的应用程序中实现它们时遇到了麻烦。
我有一个绑定到 SqlDataSource 的 GridView。列宽取决于内容（我让浏览器处理）。 GridView 是可排序的（可以单击标题）并具有带有编辑和删除按钮的列，这些按钮取决于每行中的 DataKey。
据我所知，GridView 在 HTML 中呈现为：
<div><table><tbody>
<tr><th></th></tr>
<tr><td></td></tr>
</tbody></table></div>
所以没有线程部分。
我在 StackOverflow 上尝试了许多使用 CSS 或 JavaScript 或 jQuery 的解决方案。脚本解决方案似乎依赖于线程，有些人建议将其添加到我的代码隐藏中以在 gridview_PreRender 创建线程...
MyGridview.UseAccessibleHeader = true;
MyGridview.HeaderRow.TableSection = TableRowSection.TableHeader;
但我收到一个错误，因为 MyGridview.HeaderRow 不存在，我无法设置为对象的实例（标题），因为它为空。
我还尝试了一些 CSS 解决方案，例如这里推荐的一个：HTML fixed header table scrollbar 它实际上与我需要的非常接近，只是标题行最终会以一条奇怪的白线穿过它。我对此进行了调查，发现它与border-collapse 属性有关。我可以按 F12 进入 Web 浏览器的开发者工具并修复它，但无论我在 CSS 中设置什么，它最初都不会在运行时加载。
此外，虽然这对我来说在 IE 中有效，但在 Chrome 或 Safari 中无法正常工作。标题栏将被向左挤压，而不是拉伸以匹配表格其余部分的列宽。这很奇怪，因为示例页面在 Chrome 和 Safari 中渲染得很好（所以我的其他 CSS 或代码可能会与此混淆）。
我是否遗漏了一些非常明显的东西？或者我没有提供足够的信息来解决这个问题？理想情况下，这将是一个模块化的解决方案，我可以跨越我的一堆网页（它们都使用相同的 CSS 来呈现 GridViews，已经）并且将是跨浏览器的。我不反对 JavaScript 解决方案，只要 Sortable 标头和 DataKey 按钮仍然存在。
【问题讨论】：
-
我还没有找到解决这个问题的好办法。我开始着手为 gridview 标题构建第二个表（打算使用 JS 来匹配 col 宽度，以便它与 gridview 匹配），这种工作在 IE 中。我可以让那张桌子在宽度上匹配。但它在 Chrome 中失败了。就像我的 JavaScript 在 Chrome 中完全没有做任何事情一样。 var gridView = document.getElementByID('gridview'); var tableHeader= document.getElementByID('header'); for (var i = 0, cell; cell = gridView.rows[0].cells[i]; i++) { tableHeader.rows[0].cells[i].width = (cell.scrollWidth) + "px"; }