如何在数据表的打印模式下设置多个 div 并排的标题

Question

如何在数据表的打印模式下设置多个div 并排的title。

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)一个在另一个下面而不是彼此相邻。

Answer 1

最简单的方法是将inline-block添加到rep_headerdiv中的每个div中：

<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 之间添加更多空间。