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

Question

如何为数据表设置标题，该标题是多个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

最简单的方法是向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之间添加更多的空间。