Исправленная ширина заголовка столбца не соответствует ширине столбцов тела

Заголовки не соответствуют ширине столбцов. Пример: http://jsfiddle.net/DyMSb/1/Исправленная ширина заголовка столбца не соответствует ширине столбцов тела

Скриншот: http://s17.postimg.org/dybznay9b/screen.png

Я использую:

ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css
ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css
datatables.net/release-datatables/media/js/jquery.js
datatables.net/release-datatables/media/js/jquery.dataTables.js
datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js

Вот код Я использую:

JS:

$(document).ready(function() { 
    var aoColumns = [null,null,null,null,null,null,null,null,null,null,null]; 

    var oTable = $('#example').dataTable({ 
     "sScrollX": "100%", 
     "sScrollXInner": "150%", 
     "bPaginate": false, 
     "bAutoWidth": false, 
     "aoColumns": aoColumns  
    }); 

    var oFC = new FixedColumns(oTable, { 
     "iLeftColumns": 4 
    }); 

    oTable.fnAdjustColumnSizing(); 
});

HTML:

<body> 
    <div class="container"> 
     <table width="100%" cellpadding="0" cellspacing="0" border="1" id="example"> 
     <thead> 
      <tr> 
       <th rowspan="2">Branch</th> 
       <th rowspan="2">Object</th> 
       <th rowspan="2">Address</th> 
       <th rowspan="2">Count</th> 
       <th colspan="7">Availability</th> 
      </tr> 
      <tr> 
       <th>15</th> 
       <th>16</th> 
       <th>17</th> 
       <th>18</th> 
       <th>19</th> 
       <th>20</th> 
       <th>21</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>United States of America, Washington</td> 
       <td>ABC-123</td> 
       <td>1514 Amber Pond Highway, Nohead Bottom, Washington, 99205-8224, US, (425) 023-9448</td> 
       <td><a href="#">7</a></td> 
       <td>-</td><td>-</td><td>-</td> 
       <td>-</td><td>-</td><td>-</td><td>-</td> 
      </tr> 
      <tr> 
       <td>United States of America, South Dakota</td> 
       <td>DEF-456</td> 
       <td>7827 Stony Pointe, Sunsweet, South Dakota, 57006-2156, US, (605) 621-7800</td> 
       <td><a href="#">7</a></td> 
       <td>-</td><td>-</td><td>-</td> 
       <td>-</td><td>-</td><td>-</td><td>-</td> 
      </tr> 
      <tr> 
       <td>United States of America, Newfoundland</td> 
       <td>XYZ-549</td> 
       <td>2379 Dewy Pioneer Highlands, Humbug, Newfoundland, A7O-6P5, CA, (709) 217-5115</td> 
       <td><a href="#">7</a></td> 
       <td>-</td><td>-</td><td>-</td> 
       <td>-</td><td>-</td><td>-</td><td>-</td> 
      </tr> 
      <tr> 
       <td>United States of America, Washington</td> 
       <td>GHI-789</td> 
       <td>5842 Easy Bay, Kravaksarak, Washington, 98428-9376, US, (425) 998-1922</td> 
       <td><a href="#">7</a></td> 
       <td>-</td><td>-</td><td>-</td> 
       <td>-</td><td>-</td><td>-</td><td>-</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
</body>

источник

2013-04-17 abg

проверить, если [это] (http://stackoverflow.com/a/18078539/1545793) ответ относится к вам. – tostasqb

Я мог бы решить ее переустановку поля и отступы th «с до нуля:

th { 
    padding: 0 !important; 
    margin: 0 !important; 
}

источник

2013-04-17 08:23:55 pzin

Лучше, но не очень хорошо. Демо: http://jsfiddle.net/TT9Xh/ и скриншот: http://s13.postimg.org/61w8xbs8n/test.png – abg

Не знаю, что делает 'sScrollX' действительно, но устанавливая его на более высокое значение и с моим ответом, прежде чем это исправить. – pzin

Сколько стоит? Я пробовал 100% -> 190%, и для меня не было разницы:/ – Ray

Проблема вызвана sScrollX-скроллинга, который добавляет дополнительное пространство по горизонтали в столбцах на правой стороне, и вот почему другие (без полосы прокрутки) становятся короче в заголовке.

Если вы прокомментируете строку sScrollX, столбцы будут правильно выровнены.

--- UPDATE ---

Чтобы зафиксировать ширину с JS, это будет работать:

// *** FIX WIDTHS ON LEFT SIDE *** 
var widths = []; 

// first fix widths on tbody ... 
$('.DTFC_LeftBodyWrapper thead th').each(
    function(){ 
     $(this).css('width', $(this).width()); 
    }); 

// ... now save the actual widths on array 
$('.DTFC_LeftBodyWrapper thead th').each(
    function(){ 
     widths.push($(this).width()); 
    }); 

// ... and now update widths on thead 
$('.DTFC_LeftHeadWrapper thead th').each(
    function(i, val){ 
     console.log('i:', i, ', width:', widths[i]); 
     $(this).css('width', widths[i]); 
    });

Я обновил jsfiddle здесь: http://jsfiddle.net/aKDL7/32/

Примечание: Я изменил также Count до Cnt, потому что он был слишком длинным, в окне jsfiddle, что вызвало дополнительные проблемы с шириной.

источник

2013-04-17 08:30:26 andzep

Мне нужно, чтобы первые 4 столбца были исправлены, а столбец «Доступность» прокручивается. Если я прокомментирую строку sScrollX, таблица не будет прокручиваться. – abg

Да, я знаю. Проблема заключается в том, как ширина ячеек вычисляется с помощью скрипта FixedColumns. С этим дополнительным горизонтальным пространством он затем «просчитывает» ширины ячеек с левой стороны. Вероятно, это ошибка. Но я не могу придумать какой-либо способ исправить это чисто чистым css. Возможно, вы также можете добавить полосу прокрутки с левой стороны, но как-нибудь исправить? Или просто изменить js-скрипт. – andzep

В случае, если вы еще не исправили проблему, я думаю, что самым простым способом было бы повторно назначить команды from из первой строки таблицы (под заголовком) в ячейки заголовка. Таким образом, у вас снова есть соответствующая ширина между заголовками и ячейками тела. – andzep

Datatables просчитывает ширину th, когда они включают в себя горизонтальное заполнение.

Я работал над этим, удалив свой padding с th, добавив в него промежуток, а затем добавив отступы к проему.

ie.

<style> 
th {padding: 0} 
th > span {padding: 0 10px} 
<style>

Изменение разметки, как это:

<tr> 
<th rowspan="2"><span>Branch</span></th> 
<th rowspan="2"><span>Object</span></th> 
</tr>

источник

2013-11-01 08:54:18 jb510

Исправленная ширина заголовка столбца не соответствует ширине столбцов тела

ответ

Смежные вопросы