Создание модальной коробки BS4 на всю ширину страницы

Question

У меня есть DataTable внутри модального BS4. Таблица выглядит хорошо, но я не могу заставить модал работать в полноэкранном режиме (по ширине, я бы хотел оставить немного поля по вертикали).

Я знаю, что таких вопросов довольно много, но я не могу заставить работать какое-либо из решений. (Я начинающий, я только начал работать с CSS около 2 недель назад). Я изменил теги на листе style.css, переопределил! Важный и целых девять. Ничто не похоже на работу. Модал все еще является стандартным размером модал-LG, и таблица переполняется и не центрируется (см. Скриншот).

Поэтому, может кто-нибудь опубликовать весь раздел своего CSS, где он сделал модальный переход на 100% ширины страницы?

Я опубликую ниже свой 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>