我知道这个话题已经讨论了很多次，但是找不到解决我问题的任何东西。
您可以在这里找到页面：http://www.unitedf07.it/league_details.php?project_id=12。 如您所见，我在不同的选项卡中有3个或更多表格（使用material-design-lite制成）。问题是，当我通过jQuery将表的scrollX选项设置为“ true”时，一个或多个表中的标题失去对齐（您可以通过在第二或第三选项卡上单击来看到它）。
这是表格的代码：
$('table.results').each(function() {
// recupero l'id del girone
var group_id = $(this).data('group_id');
// group_id = group_id.substring(8);
// recupero il nome del girone
var group_name = $(this).data('group_name');
// calcolo il numero di colonne della tabella
var num_cols = $(this).find('tr')[0].cells.length;
// recupero il tipo di progetto
var project_type = $('#matches_results').data('project_type');
var $table = $(this).DataTable({
"deferRender": true,
// "responsive": true,
"scrollX": true,
"paging": false,
"order": [[ 2, "asc" ]],
"columnDefs": [
{ "type": "natural", targets: 0 },
{ "visible": false, "targets": 1 },
{
"orderable": false,
"targets": -1
}
],
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(1, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
if (group) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="' + num_cols + '">'+group+'</td></tr>'
);
last = group;
}
}
});
},
dom: '<"top"li>B<"search-filter"f>rt<"bottom"lip>',
buttons: [{
extend: 'pdfHtml5',
text: '<img class="mdl-chip__contact" src="images/pdf_icon.png" />' + '<span class="mdl-chip__text">Esporta PDF</span>' + '<div class="mdl-tooltip" data-mdl-for="btn_pdfExport-' + group_id + '">Esporta la tabella in formato PDF</div>',
init: function(api, node, config) {
$(node).addClass('mdl-chip mdl-chip--contact').removeClass('dt-button buttons-pdf buttons-html5').prop('id', 'btn_pdfExport-' + group_id)
},
exportOptions: {
// grouped_array_index: [1],
columns: '.pdfExport',
format: {
body: function(data, row, column, node) {
// elimino tutti gli eventuali tag <img>
data = data.replace(/<img[^>]*>/gmi, '');
// trasformo tutti gli eventuali tag <br> con una nuova riga
data = data.replace(/<br\s*\/?>/gmi, '\r');
// elimino tutti gli eventuali tag html
data = data.replace(/(<([^>]+)>)/ig, '');
return $.trim(data);
}
}
},
orientation: 'landscape',
title: function() {
var title = 'Calendario e Risultati ' + $('#matches_results').data('league_name') + ' - ' + $('#matches_results').data('season_name') + ' - ' + $('#grp-' + group_id).text();
return title;
},
messageTop: function() {
var text = '';
$('select[id$="Filter"]').each(function() {
text += $(this).parent().find('label').text() + ': ' + $('option:selected', this).text() + '\n\r';
});
if (text != '') text += 'Filtro di ricerca: ' + $('#search').val();
return text;
},
filename: function() {
var group_name = $('#grp-' + group_id).text().replace(/ /g, '_');
return 'Risultati_' + file_name + group_name;
}
}, {
extend: 'excelHtml5',
text: '<img class="mdl-chip__contact" src="images/xls_icon.png" />' + '<span class="mdl-chip__text">Esporta XLS</span>' + '<div class="mdl-tooltip" data-mdl-for="btn_xlsExport-' + group_id + '">Esporta la tabella in formato Excel</div>',
init: function(api, node, config) {
$(node).addClass('mdl-chip mdl-chip--contact').removeClass('dt-button buttons-pdf buttons-html5').prop('id', 'btn_xlsExport-' + group_id)
},
exportOptions: {
columns: '.xlsExport',
format: {
body: function(data, row, column, node) {
// elimino tutti gli eventuali tag <img>
data = data.replace(/<img[^>]*>/gmi, '');
// trasformo tutti gli eventuali tag <br> con un ;
data = data.replace(/<br\s*\/?>/gmi, ';');
// elimino tutti gli eventuali tag html
data = data.replace(/(<([^>]+)>)/ig, '');
return $.trim(data);
}
}
},
title: null,
messageTop: null,
messageBottom: null,
filename: function() {
var group_name = $('#grp-' + group_id).text().replace(/ /g, '_');
return 'Risultati_' + file_name + group_name;
}
}],
"language": {
"decimal": "",
"emptyTable": "Nessun dato disponibile nella tabella",
"info": "_START_ - _END_ di _TOTAL_",
"infoEmpty": "0 - 0 di 0",
"infoFiltered": "(filtrati da _MAX_ record totali)",
"infoPostFix": "",
"thousands": ".",
"lengthMenu": '<span>Elementi per pagina:</span><select class="browser-default">' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '<option value="-1">Tutti</option>' + '</select></div>',
"search": "Cerca...",
"zeroRecords": "Nessun record trovato",
"paginate": {
"first": "Prima",
"last": "Ultima",
"next": "Successiva",
"previous": "Precedente"
}
}
});
componentHandler.upgradeDom();
// CUSTOMIZATION FOR THE DATATABLES SEARCH FILTERS
// recupero il div del filtro di ricerca
var $filter_div = $(this).parent().parent().parent().find('.search-filter');
// recupero l'id del filtro di ricerca
var filter_id = $filter_div.find('div[id^="results-"]').prop('id');
filter_id = filter_id.substring(8, 9);
$filter_div.find('label').html('<label class="mdl-button mdl-js-button mdl-button--icon search-icon" for="'+filter_id+'_search"><i class="material-icons">search</i></label><div class="mdl-textfield mdl-js-textfield search-input"><input class="mdl-textfield__input" type="text" id="'+filter_id+'_search"><label class="mdl-textfield__label" for="'+filter_id+'_search">Cerca...</label></div>');
componentHandler.upgradeDom();
$('#'+filter_id+'_search').on('keyup', function() {
$table.search($(this).val()).draw();
});
});
设置了许多选项，但是大多数选项用于语言，按钮导出和搜索过滤器，因此它们似乎不影响标题对齐。有想法吗？
提前谢谢...