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

Question

如何在数据表title的打印模式下并排设置多个 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)一个在另一个之下，而不是彼此相邻。

Answer 1

最简单的方法是添加inline-block到 div 中的三个 div 中的每一个rep_header：

        <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

当然，这会影响网页和打印页面。

如果您只想更改打印页面，那么您可以style="display: inline-block;"在 DataTablescustomize函数内部添加，方法与您已经添加text-align的其他 css 样式相同。

如果需要，您还可以提供其他样式（例如填充、边距）以在 div 之间添加更多空间。