jQuery 数据表标题与垂直滚动不对齐 [英] jQuery Datatables Header Misaligned With Vertical Scrolling

问题描述

我已经在 datatables.net 论坛上发布了这个，但一周后，仍然没有回应.希望我能在这里找到帮助...

I've posted this in the datatables.net forums, but after a week, still no response. Hopefully I can find help here...

我正在使用数据表版本 1.8.1，并且在启用垂直滚动的情况下对列标题对齐做噩梦.

I'm using datatables version 1.8.1 and am having nightmares over column header alignment with vertical scrolling enabled.

使用下面发布的代码，标题在 Firefox 和 IE8 和 IE9 中正确排列，但 Chrome 和 IE7 已关闭.我在这个项目中使用了 lot 的数据表，这是每个人的问题.我迫切需要帮助！

With the code posted below, the headers line up correctly in Firefox and IE8 and IE9, but Chrome and IE7 are off. I'm using a lot of datatables on this project, and this is a problem with every one. I'm desperate for help!

我发现这与设置表格的宽度有关.数据表采用其容器的宽度.如果我没有设置宽度，一切都会很好地排列(但表格对于页面上我需要的地方来说太大了).如果我给表格的 div(或更高位置的父 div)一个宽度，标题不会正确排列.

谢谢！！

截图:

www.dennissheppard.net/firefox_alignment.png

www.dennissheppard.net/firefox_alignment.png

www.dennissheppard.net/chrome_alignment.png

www.dennissheppard.net/chrome_alignment.png

www.dennissheppard.net/ie7_al​​ignment.png

www.dennissheppard.net/ie7_alignment.png

otable = $('#order_review_grid').dataTable({                
    'fnRowCallback': function (nRow, strings, displayIndex, dataIndex) {
        return formatRow(nRow, dataIndex);
    },
    'fnDrawCallback':function()
    {
        checkIfOrderSubmitted(this);                    
    },
    'aoColumnDefs':
    [
        { 'bVisible': false, 'aTargets': [COL_PRODUCT] },
        { 'bSortable': false, 'aTargets': [COL_IMAGE, COL_DELETE] },
        { 'sClass': 'right_align', 'aTargets': [COL_PRICE] },
        { 'sClass': 'center_align', 'aTargets': [COL_BRAND,COL_PACK] },
        { 'sClass': 'left_align', 'aTargets': [COL_DESCRIPTION] }
    ],
    'sDom': 't',
    'sScrollY':'405px',
    'bScrollCollapse':true,
    'aaSorting':[]
});

<table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">                 
    <thead class="grid_column_header_row" id="order_review_grid_column_header_row">
        <tr>
            <td class="" id='sequenceNumber'>SEQ #</td>
            <td class="grid_sc_header" id='statusCode'>Sc</td>
            <td class="grid_sc_header" id='onOrderGuide'>O.G.</td>
            <td class="grid_image_header" id='image'>Image</td>                         
            <td class="grid_description_header" id='description'>Description</td>                           
            <td class="grid_brand_header" id='label'>Brand</td>
            <td class="grid_pack_header" id='packSize'>Pack</td>
            <td class="grid_price_header" id='price'>Price</td>
            <td class="grid_qtrfull_header" id='caseQuantity'>Full</td>
            <td class="grid_qtrypart_header" id='eachQuantity'>Partial</td>
            <td class="grid_refnum_header" id='referenceNumber'>Ref #</td>
            <td class="grid_refnum_header">&nbsp;</td>
        </tr>
    </thead>
    <tbody class="">
        <!-- loaded data will go here -->
    </tbody>
</table>

推荐答案

我遇到了这个问题，结果是我的 CSS 产生了副作用.尝试禁用所有外部css，看看问题是否仍然存在.

I had the problem and it turned out to be a side effect with my CSS. Try to disable all external css and see if the problem persists.

这篇关于jQuery 数据表标题与垂直滚动不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！