jQuery Datatables Header Misaligned With Vertical Scrolling

Я написал об этом на форумах datatables.net, но спустя неделю ответа все еще нет. Надеюсь, я смогу найти помощь здесь...

Я использую datatables версии 1.8.1 и у меня кошмарные проблемы с выравниванием заголовков колонок при включенной вертикальной прокрутке.

С кодом, опубликованным ниже, заголовки выравниваются правильно в Firefox, IE8 и IE9, но Chrome и IE7 не работают. Я использую много таблиц данных в этом проекте, и это проблема с каждой из них. Я отчаянно нуждаюсь в помощи!

EDIT: Я понял, что это как-то связано с установкой ширины таблицы. Таблица данных принимает ширину своего контейнера. Если я не задаю ширину, все выстраивается нормально (но таблица слишком большая для того места, где она мне нужна на странице). Если я задаю ширину div таблицы (или родительского div где-то выше), то заголовки не выстраиваются правильно.

Спасибо!!!

Скриншоты:

www.dennissheppard.net/firefox_alignment.png

www.dennissheppard.net/chrome_alignment.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>
23
задан dennis.sheppard 22 December 2011 в 20:09
поделиться