如何为数据表设置标题，该标题是多个DIV并排的打印模式。
var table = $('#displayTable').DataTable({
"ordering": false,
data: parsedData.data,
responsive: false,
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
title: $("#rep_header").html(),
footer: true,
customize: function (win) {
$(win.document.body).find('thead').prepend('<div class="header-print">' + $('#dt-header').val() + '</div>');
$(win.document.body).find('table')
.addClass('table table-striped table-bordered')
.css('direction', 'rtl');
$(win.document.body).find('#rep_head_2_con').css('text-align', 'center');
$(win.document.body).find('#rep_head_3_con').css('text-align', 'left');
$(win.document.body).find('#rep_head_3_con').css('vertical-align', 'top');
}
},
HTML:
<div id="rep_header">
<div id="rep_head_1">
<p id="rep_head_1_con">
AAA
<br />
BBB
</p>
</div>
<div id="rep_head_2">
<p id="rep_head_2_con">
AAA
<br />
BBB
</p>
</div>
<div id="rep_head_3">
<p id="rep_head_3_con">
AAA
<br />
BBB
</p>
</div>
</div>
文本对齐进行得很好，但是div(rep_head_1，rep_head_2，rep_head_3)一个在另一个下面，而不是彼此旁边。
最简单的方法是向rep_headerdiv中的三个div中的每一个都添加inline-block:
<div id="rep_header">
<div id="rep_head_1" style="display: inline-block;">
<p id="rep_head_1_con">
AAA
<br />
BBB
</p>
</div>
<div id="rep_head_2" style="display: inline-block;">
<p id="rep_head_2_con">
CCC
<br />
DDD
</p>
</div>
<div id="rep_head_3" style="display: inline-block;">
<p id="rep_head_3_con">
EEE
<br />
FFF
</p>
</div>
</div>
现在数据将显示如下:
AAA CCC EEE
BBB DDD FFF
当然，这会影响网页和打印页。
如果您只想更改打印页，则可以在DataTablesCustomize函数中添加style=“display:inline-block；”，方法与添加text-align和其他css样式相同。
如果需要，您还可以提供额外的样式（例如，填充，边距），以便在DIV之间添加更多的空间。
