jQuery Datatables标题与Vertical Scrolling不一致 [英] 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已关闭。我正在这个项目中使用数据表的批次，这是每个人的问题。我绝望的帮助！

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!

编辑：我已经弄清楚，这与设置表的宽度有关。 datatable取其容器的宽度。如果我没有设置宽度，所有内容都会很好（但是桌面太大，我需要在页面上）。如果我给表的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 Datatables标题与Vertical Scrolling不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！