Jqgrid列标题和数据未对齐

我有一个动态的表，并在C＃后面的代码中生成。 我使用tabletogrid将这个html表转换为Jqgrid，我用来做的代码是

tableToGrid('#gvSearchDocuments', { height: 'auto', autowidth:true, multiselect: true, pager: 'pagersearch', rowList: [20, 30, 50], colNames: ['ID','Message Date', 'Fund', 'Partner', 'Menu', 'Sub Menu', 'Document Name', 'Document Description', 'Type'], colModel: [ { name: 'ID', hidden: true}, { name: 'MessageDate', align: 'right', sorttype: 'date', formatter: 'date', formatoptions: { newformat: 'MdY' } }, { name: 'Fund', align: 'left'}, { name: 'Partner', align: 'left' }, { name: 'Menu', align: 'left'}, { name: 'SubMenu', align: 'left'}, { name: 'Documentname', align: 'left' }, { name: 'DocumentDescription', align: 'left'}, { name: 'Type', align: 'left' } ] }); 

我遇到的问题是当生成jqgrid时，列标题和数据没有正确对齐。我尝试使用autoWidth，width和shrinkToFit但没有运气。 这就是我的网格在IE，Firefox和Chrome中的显示方式。

我在这个上花了一天多时间，它慢慢地杀了我。 任何帮助都会很棒！

Answer 1

我终于能够解决这个问题了。

我在使用display: none;调用tableToGrid之前错误地隐藏了纯 HTML表display: none; 然后用display: block;转换后显示它display: block; 。 display: block; 由数据单元inheritance，对它们产生负面影响。 当标题resize时，它们的大小调整被阻止（它们在达到显示整个单元格内容所需的最小宽度后停止resize）。

请参阅此jsFiddle以重现该问题。 如果您注释掉脚本中的最后一行，则问题将消失。

顺便说一句，我知道tableToGrid不是很好（在性能方面很糟糕）但在我的应用程序中的一个特殊情况是我可以使用的唯一方法，不需要大量重写大量遗留代码。

Answer 2

尝试将此属性应用于您的表..

 table-layout: fixed; 

这对我有用。 我希望这可能对你有所帮助。

Answer 3

编辑css

 .ui-jqgrid tr.jqgrow td{ white-space: normal; }