Question

我在BS4模式内部有一个DataTable。该表显示正常，但我无法使模式显示为全屏显示（在宽度方向上，我想垂直保留一些边距）。

我知道有很多这样的问题，但是我似乎无法获得任何可行的解决方案。（我是一个初学者，大约2周前我才开始使用CSS）。我已经更改了style.css工作表中的标签，以！important和整个九个标签覆盖。似乎没有任何作用。模态仍然只是标准模态lg大小，表格溢出且未居中（请参见屏幕截图）。

因此，有人可以在模式已达到页面宽度的100％的地方张贴CSS的整个部分吗？

我将在我的HTML代码下方发布结果的屏幕截图。

感谢任何帮助！

<table id="example" class = 'table table-hover'>


     <thead>
        <tr>
        <th>IDENTIFIER</th>
        <th>ESA_INS_2010</th>
        <th>ISSUE_DT</th>
        <th>ISSUER_NAME</th>
        <th>COUPON_TYPE2</th>
        <th>AMOUNT_OUT</th>
        <th>EDIT</th>
        <th>DRILL-DOWN</th>
        </tr>
     </thead>
    <tbody>
     {% for result in results %}
        <tr>
           <td>{{result["IDENTIFIER"]}}</td>
           <td>{{result["ESA_INS_2010"]}}</td>
           <td>{{result["ISSUE_DT"]}}</td>
           <td>{{result['ISSUER_NAME']}}</td>
           <td>{{result['COUPON_TYPE2']}}</td>
           <td>{{result['AMOUNT_OUT']}}</td>
           <td align="center"><a href="#editEmployeeModal" class="edit" data-toggle="modal"><i class="material-icons" data-toggle="tooltip" title="Edit">&#xE254;</i></a></td>
           <td align="center">XXX</td>
        </tr>
     {% endfor %}
     </tbody>

     <tfoot style='display: table-header-group !important;'>
        <tr>
        <th>IDENTIFIER</th>
        <th>ESA_INS_2010</th>
        <th>ISSUE_DT</th>
        <th>ISSUER_NAME</th>
        <th>COUPON_TYPE2</th>
        <th>AMOUNT_OUT</th>
        <th>EDIT</th>
        <th>DELETE</th>
        </tr>
     </tfoot>
     <style>tfoot {display: table-header-group !important;}</style>
  </table>
  </div>

<div id="editEmployeeModal" class="modal fade bd-example-modal-lg" style = 'margin-left: 0px; margin-right: 0px; width: 100%;'>
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <table id="example2" class = 'table table-hover' width="100%">


             <thead>
                <tr>
                <th>IDENTIFIER</th>
                <th>ESA_INS_2010</th>
                <th>ISSUE_DT</th>
                <th>ISSUER_NAME</th>
                <th>COUPON_TYPE2</th>
                <th>AMOUNT_OUT</th>
                <th>EDIT</th>
                <th>DRILL-DOWN</th>
                </tr>
             </thead>
            <tbody>
             {% for result in results %}
                <tr>
                   <td>{{result["IDENTIFIER"]}}</td>
                   <td>{{result["ESA_INS_2010"]}}</td>
                   <td>{{result["ISSUE_DT"]}}</td>
                   <td>{{result['ISSUER_NAME']}}</td>
                   <td>{{result['COUPON_TYPE2']}}</td>
                   <td>{{result['AMOUNT_OUT']}}</td>
                   <td align="center"><a href = "{{ url_for('sql_editlink', eIDENTIFIER=result['IDENTIFIER']) }}"><i class="fas fa-edit"></a></td>
                   <td align="center">XXX</td>
                </tr>
             {% endfor %}
             </tbody>

             <tfoot style='display: table-header-group !important;'>
                <tr>
                <th>IDENTIFIER</th>
                <th>ESA_INS_2010</th>
                <th>ISSUE_DT</th>
                <th>ISSUER_NAME</th>
                <th>COUPON_TYPE2</th>
                <th>AMOUNT_OUT</th>
                <th>EDIT</th>
                <th>DELETE</th>
                </tr>
             </tfoot>
             <style>tfoot {display: table-header-group !important;}</style>
          </table>
        </div>
    </div>
</div>
<script>
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
        'copy', 'csv', 'excel'
        ],
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },

    } );
} );
</script>
    <script>
$(document).ready(function() {
    $('#example2').DataTable( {
        dom: 'Bfrtip',
        buttons: [
        'copy', 'csv', 'excel'
        ],
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },

    } ).dataTableLayout {
            table-layout:fixed;
            width:100%;
        };
} );
</script>

使BS4模式框的页面全宽

0 个答案: