Почему мои заголовки кровоточат?

Question

Я пытаюсь реализовать fixed column using datatables. Пример, который они дают, кажется, выглядит хорошо. У меня есть implemented the same code in jsfiddle, но мои заголовки истекают кровью друг друга, когда я прокручиваю правый & влево. Как это исправить?

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     scrollY:  "300px", 
     scrollX:  true, 
     scrollCollapse: true, 
     paging:   false 
    }); 

    new $.fn.dataTable.FixedColumns(table, { 
     leftColumns: 1, 
     rightColumns: 1 
    }); 
}); 

Answer 1

В приведенном примере используются стили, чтобы скрыть перекрывающийся контент, отсутствующий в вашем jsfiddle. В частности, они добавляют цвет фона для столбцов, которые являются фиксированными, так, например:

column.stripe tbody tr.odd > .sorting_1 { 
    background-color: #f1f1f1; 
} 

См dataTables.fixedColumns.css и jquery.dataTables.css

Если применить эти стили к вашей скрипке все выглядит нормально: your fiddle.

Answer 2

Вы можете добавить background-color к необходимым элементам (обычно тд & тыс). Вот обновленная скрипка (основанная на том, что вы предоставили): http://jsfiddle.net/cjqgmzb9/

Кстати, если вы используете файлы CSS, предоставленные плагином (см. Вкладку CSS в приведенном примере), таблица, вероятно, должна выглядеть точно так же как и демо.