Я написал об этом на форумах 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"> </td>
</tr>
</thead>
<tbody class="">
<!-- loaded data will go here -->
</tbody>
</table>