Как центрировать заголовок align datatables

Я новичок в datatables. Когда я делаю заголовок таблицы, он всегда остается выровненным. Как настроить выравнивание по центру заголовка? Я читал datatables.net/manual/styling/classes и datatables.net/reference/option/columns.className но до сих пор не знаю, как это осуществить.

$('.table').DataTable({
  "paging": true,
  "lengthChange": true,
  "searching": true,
  "ordering": true,
  "info": true,
  "language": {
    "url": "http://cdn.datatables.net/plug-ins/1.10.9/i18n/Indonesian.json"
  }
  "columnDefs": {
    {
      className: "dt-head-center"
    }
  }
});
7
css datatables html jquery

4 ответов

возможно, вы забыли после указания класса, вам нужно добавить следующее в CSS:

.dt-head-center {text-align: center;}

кроме того, если класс не был добавлен к <th> таблицы, попробуйте добавить ниже CSS для общего материала:

thead, th {text-align: center;}

/* OR */

.table thead,
.table th {text-align: center;}

чтобы сделать его конкретным для конкретной таблицы, вы можете дать таблице id="tableID" и затем в CSS вы можете сделать:

#tableID thead,
#tableID th {text-align: center;}
4

вы можете сделать это с помощью CSS. Просто используйте свой класс таблицы в качестве селектора и нацеливайте каждый заголовок таблицы внутри этого селектора, например:

.table th {
  text-align: center;
}
2

используя этот стиль:

table.center-all td,th{
    text-align :center;
}

Я могу добавить center-all класс к моей таблице, и все будет выровнено по центру. вот так:

<table class="center-all">
    ....
</table

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

1

OP, вы были очень близки к решению, просто пропустив на columnDefs присвоить dt-head-center class к заголовку, который вы хотите стиль.

// apply to columns 1 & 2
targets: [ 0, 1 ]

CSS-это вариант, но не обязательно.

мне нравится предлагаемый метод DataTables использования column.className опция для укладки ячеек затем применить их с помощью targets. https://datatables.net/reference/option/columns.className это дает нам более тонкий уровень контроля в отличие от глобальное приложение CSS.

это выровняет заголовок и содержание тела индивидуально:

columnDefs: [
    // Center align the header content of column 1
   { className: "dt-head-center", targets: [ 0 ] },
   // Center align the body content of columns 2, 3, & 4
   { className: "dt-body-center", targets: [ 1, 2, 3 ] }
]

или выровнять их одновременно:

columnDefs: [
   // Center align both header and body content of columns 1, 2 & 3
   { className: "dt-center", targets: [ 0, 1, 2 ] }
]

формат ячеек-класс:

dt[-head|-body][-left|-center|-right|-justify|-nowrap]

дополнительная информация о классах ячеек DataTables:https://datatables.net/manual/styling/classes#Cell-classes

1