如何修复 jQuery 选项卡调整表格列宽度以隐藏内容？答案

【问题标题】：How to fix jQuery tabs adjusting table columns widths to obscure content?如何修复 jQuery 选项卡调整表格列宽度以隐藏内容？
【发布时间】：2011-08-22 20:25:21
【问题描述】：

我创建了一个网页，它使用 jQuery-UI 选项卡一次显示部分数据。每个选项卡对应一年。对于每个选项卡，都有一个 ASP.net GridView，其中包含有关该年份的信息。

当用户更改选项卡时，表格显示正确，但是当页面第一次在浏览器中打开并且代码运行以初始化 jQuery-UI 选项卡时，表格显示不正确。数据都在那里，但列宽太窄以至于部分文本被遮挡。

出于某种原因，我在 IE 中看到了这种行为，但在 Firefox 中没有。

【问题讨论】：

请注意，将代码放在 jsfiddle.net 页面中可能会使其他类似的调试案例更容易（事实上，我经常发现它使我更容易调试我的自己的代码也是如此）。

标签： jquery jquery-ui gridview jquery-ui-tabs

【解决方案1】：

通过调试器广泛运行代码后，我找到了一个可行的解决方案：

jQuery-UI-tabs 代码将多种样式应用于页面的不同部分。在这些应用程序中，有一个样式 ui-widget 到每个选项卡内容的 div 的应用程序。如果我将此样式应用于我的标记中的 div，那么我在 IE 7 中就没有这个问题。

【讨论】：

我也遇到了同样的问题 - 你的答案就是罚单！
@Jake Feasel，很高兴在这里写这篇文章对您有所帮助。