Таблица данных JQuery не видна

У меня есть веб-приложение ASP.NET Core MVC, написанное на C#. Я создал представление Razor и в этом представлении показываю две таблицы данных jQuery по горизонтали, а между этими двумя таблицами данных есть 3 кнопки.

Эти элементы управления находятся в контейнере. Но при запуске приложения видна только граница - две таблицы данных не видны.

 @model LMD_WEB.ViewModels.vmStudentMaster
 @{
    Layout = null;
  }

  <style>
        .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 20px;
        }      

        .datagrid {
        flex: 1;
        margin: 10px;
        border: 1px solid black;            
         }

       .buttons {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 10px;
        }

        .buttons button {
            margin: 5px 0;
        }

       .footer-buttons {
        display: flex;
        justify-content: space-between;
         margin: 10px;
        }

       .textbox {
        margin: 10px;
        }

        .textbox input {
            width: 100%;
        }
    </style>

    <div class = "textbox">
        <input type = "text" placeholder = "Text box" />
    </div>

    <div class = "container">
        <div class = "datagrid" id = "datagrid1">
        <table id = "table1" class = "display table-bordered" 
               style = "width:100%">        
        </table>
    </div>
    <div class = "buttons">
         <button id = "button1">Button1</button>
         <button id = "button2">Button2</button>
         <button id = "button3">Button3</button>
    </div>
    <div class = "datagrid" id = "datagrid2">
         <table id = "table2" class = "display table-bordered" 
                style = "width:100%">
         </table>
    </div>
    </div>
    <div class = "footer-buttons">
         <button id = "buttonCancel">Cancel</button>
         <button id = "buttonOK">OK</button>
    </div>


   <script>

   $(document).ready(function () {
        $('#table1').DataTable();
        $('#table2').DataTable();
        LoadGrid1();
    });

   const LoadGrid1 = async () => {
    $("#DATATABLE1").DataTable({
        serverSide: true,
        filter: false,
        scrollY: StaticData.TABLE_HEIGHT + 'px',
        scrollX: true,
        lengthMenu: StaticData.TABLE_PAGE_SIZE,
        scrollCollapse: true,
        searchDelay: 800,
        ajax: {
            url: '/STUD_MANAGEMENT/LoadStuds',
            type: 'GET',
            datatype: 'json',
            data: (d) => { return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir } },
            beforeSend: () => { ShowLoader(); },
            complete: () => { HideLoader(); },
            dataSrc: (json) => {
                json = json.data;
                _log(json);
                return json;
            }
        },
        columns: [
            { data: 'StudID', title: StudID', autoWidth: true },
            { data: 'StudCode', title: 'Stud Code', autoWidth: true },
            { data: 'ClassNo', title: 'Class No', autoWidth: true },
            { data: 'Teacher', title: 'Teachere', autoWidth: true },
            { data: 'Remarks', title: Remarks', autoWidth: true },
                ],
        columnDefs: [
            { className: 'text-center', targets: [0, 2, 4] },
        ],
       });
    }

    </script>

Как сделать эти две таблицы данных видимыми в этом представлении Razor?