Как я могу предотвратить реагирование столбцов таблицы данных?

Question

Я использую этот шаблон от Creative-Tim.com.

Вот ссылка на файл: drive.google.com/open?id=1EPLpOmM9bNj2-HH-v9rF6HvSoNtTqJtQ

Файл: BS3 / examples / new_table. html.

Я использую таблицу данных, и когда ширина окна обозревателя уменьшается, заголовки столбцов становятся отзывчивыми, когда самые длинные имена заголовков таблицы появляются в верхней части стрелки сортировки, что приводит к тому, что они выглядят в шахматном порядке и криво не как все они делают это, потому что имена заголовков имеют разную длину. Как я могу сохранить их все? c? В настоящее время у меня установлена ​​таблица responsive = false, и у меня есть полоса прокрутки.

 var table = $('#datatables').DataTable({
     "scrollX": true,
     orderCellsTop: true,
     fixedHeader: true,
     "pageLength": 10,
     responsive: false,
     sDom: 'lrtip'
 });

Я просто хочу, чтобы между столбцами было достаточно места, чтобы они оставались такими и использовали прокрутку, когда страница сужается.

Answer 1

Если я правильно понял ваш вопрос, то добавление следующего CSS поможет вам:

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    position: absolute;
    display: block;
    bottom: 8px;
    right: 8px;
    font-family: 'FontAwesome';
    opacity: 0.8;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled  {
    padding-right: 30px !important;
}

table.dataTable thead .sorting.text-right,
table.dataTable thead .sorting_asc.text-right,
table.dataTable thead .sorting_desc.text-right,
table.dataTable thead .sorting_asc_disabled.text-right,
table.dataTable thead .sorting_desc_disabled.text-right  {
    padding-right: 0 !important;
}

Результат:

Answer 2

Я бы не предлагал фиксированные столбцы, если у вас нет очень определенных критериев, но то, что вы пытаетесь сделать, выглядит примерно так:

Обратите внимание, что я добавил свойство fixedColumns property и columnDefs в конце ваших настроек DT. как ниже должно работать:

 var table = $('#datatables').DataTable({
     "scrollX": true,
     orderCellsTop: true,
     fixedHeader: true,
     "pageLength": 10,
     responsive: false,
     sDom: 'lrtip',
     columnDefs: [
            { width: 200, targets: 0 }, // add your column indexes for each specification
            { width: 150, targets: 1 },
            { width: 250, targets: 2 } // etc... 
        ],
     fixedColumns: true,
     scrollY:        "300px" // some certain scroll size if you need..
 });

И если это не сработает, попробуйте обновить css, как показано ниже:

table{
  margin: 0 auto;
  width: 100%;
  clear: both;
  border-collapse: collapse;
  table-layout: fixed; // ***********add this
  word-wrap:break-word; // ***********and this
}

Answer 3

Использование position: absolute; - это, как правило, плохая идея в Datatables и любом другом плагине, который автоматически изменяет размер содержимого, так как предотвращает их полную адаптацию, может решить одну проблему, но порождает другую.

Самый чистый способ будет иметь white-space: nowrap;. Если это делает ваши заголовки слишком близкими друг к другу, просто добавьте чистое поле после каждой ячейки:

table.dataTable thead th, table.dataTable thead td {
    white-space: nowrap;
}

table.dataTable thead th::after, 
table.dataTable thead td::after,
table.dataTable tfoot th::after,  /* Don't also forget to give your footer the margin, to keep the header/footer properly aligned */
table.dataTable tfoot td::after {
    margin-right: 7px!important;
}

Обратите внимание, что таким образом вы не нарушите первоначальный макет таблицы, зафиксировав значения, что позволит освободить Datatables изменить размер заголовков так, как пожелает впоследствии. Что важнее, чем просто заставить его работать, заставить его работать более чистым способом.

В противном случае, другое крайнее решение, которое я когда-то использовал в одном из моих проектов, - это окончательное удаление значка сортировки, сохраняя при этом сортировка заголовков, так как когда у вас большие имена заголовков, это кажется более удобным, и большинство клиентов считают, что уже естественно нажимать на заголовок для сортировки

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    content: '';
}

Answer 4

Посмотрев на шаблон, я могу дать вам две подсказки:

• ширина ячейки заголовка рассчитывается на go плагином, не округляется и устанавливается на что-то вроде "74.56px ", поэтому для некоторых ячеек вы получите вычисленную ширину меньше, чем она должна быть на самом деле - текст и :after не помещаются.
• смена шрифта решает проблему

Для быстрого и грязного исправления, и если вы хотите оставить все остальное без изменений - подумайте о том, чтобы заменить шрифт на что-то стандартное, я думаю.