jquery - Jqgrid列标题和数据未对齐

Question

我有一个动态表，是在 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: 'M-d-Y' }
                                    },
                                    { 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 之前，我错误地隐藏了plain HTML 表格，然后在使用 转换后显示它>显示: block ；。 display: block; 被数据单元继承，对它们产生负面影响。当调整标题大小时，它们的大小调整被阻止(一旦达到显示整个单元格内容所需的最小宽度，它们就会停止调整大小)。

查看此jsFiddle重现该问题。如果您注释掉脚本中的最后一行，问题就会消失。

顺便说一句，我知道 tableToGrid 并不是很好(就性能而言很糟糕)，但在我的应用程序的特殊情况下，这是我可以使用的唯一不需要大量重写的方法许多遗留代码。