如何在数据表的打印模式下并排设置多个 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：&nbsp; &nbsp; &nbsp; &nbsp; <div id="rep_header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="rep_head_1" style="display: inline-block;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p id="rep_head_1_con">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; AAA&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; BBB&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="rep_head_2" style="display: inline-block;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p id="rep_head_2_con">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CCC&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DDD&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="rep_head_3" style="display: inline-block;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p id="rep_head_3_con">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; EEE&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FFF&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>现在数据将显示如下：AAA&nbsp; CCC&nbsp; EEEBBB&nbsp; DDD&nbsp; FFF当然，这会影响网页和打印页面。如果您只想更改打印页面，那么您可以style="display: inline-block;"在 DataTablescustomize函数内部添加，方法与您已经添加text-align的其他 css 样式相同。如果需要，您还可以提供其他样式（例如填充、边距）以在 div 之间添加更多空间。