如何更改 jQuery 网格中的标题高度？答案

【问题标题】：How to change the header height in jQuery grid?如何更改 jQuery 网格中的标题高度？
【发布时间】：2010-06-14 22:07:24
【问题描述】：

我有一个 jQuery 网格，有 5 列。我的列名太大，所以我在我的 jQuery 网格中定义了这样的内容：

Information about <br/> customers bioData

在我的 jQuery 专栏中，我看到了“有关信息”，但看不到“客户生物数据”。

如何设置页眉高度？

【问题讨论】：

你用什么 jquery 网格插件？

标签： jquery jqgrid

【解决方案1】：

如果您指的是 jqGrid，看起来修复是根据以下文章进行的 CSS 调整：

http://www.trirand.com/blog/?page_id=393/help/grid-header-height/ http://2centtech.blogspot.com/2009/12/jqgrid-header-and-cell-value-word-wrap.html

.ui-jqgrid .ui-jqgrid-htable th div {
    height:auto;
    overflow:hidden;
    padding-right:4px;
    padding-top:2px;
    position:relative;
    vertical-align:text-top;
    white-space:normal !important;
}

编辑：正如rd22 在 cmets 中发现的那样，似乎某些版本的 jqGrid 可能在高度规则上有一个 !important 标志（可能还有其他？）。所以如果你发现上面的 CSS 不起作用，那可能就是原因。只需将上述规则更改为包含 height:auto !important 即可。

【讨论】：

在它提到的博客中，在jqgrid 的css 加载后加载此样式，我们如何确保这一点？我使用了上面的 css，但列高仍然是固定的。
@rd22 一般情况下，只要在 jqgrid CSS 文件之后引用包含 override 的 CSS 文件，自然级联应该会处理好。但是，我的首选方法是确保我的 CSS 选择器比我希望覆盖的任何 CSS 中的选择器具有更高的特异性。
我发现了高度没有更新的原因。高度在 jqGrid CSS 中指定为 important，因此我们需要提及 height:auto !important 以使高度为 auto。
@rd22 这一定是 jqgrid 最近的变化（实际上我已经很多年没有使用它了）。我真的很鄙视!important...它需要DIAF。
老实说，我从未检查过 JqGrid 的 css，!important 为我工作，我假设了这种情况。

【解决方案2】：

很好，但是对于 IE，除了上面的类之外，您还需要添加以下内容。

.ui-jqgrid table.ui-jqgrid-htable {
    height:30px;
}

【讨论】：

【解决方案3】：

您需要同时设置表头（th）高度和div高度。

.ui-jqgrid .ui-jqgrid-htable th {
    height: 30px;
    padding: 0 2px 0 2px;
}
.ui-jqgrid .ui-jqgrid-htable th div {
    overflow: hidden;
    position: relative;
    height: 30px;
}

【讨论】：

【解决方案4】：

在 jQGrid 文件的样式标签之间添加以下 css 样式。

<style>
.ui-jqgrid .ui-jqgrid-hdiv {height:25px;}
</style>

【讨论】：