Блог

У меня есть три таблицы начальной загрузки v5, которые я хочу разместить в основной части своей страницы. В настоящее время я использую вкладки начальной загрузки, в которых три разные таблицы содержатся отдельно. Я включил одну из своих таблиц в приведенный ниже пример HTML.

Мое основное тело / содержание определяется div с class="container custom" помощью . Я установил его так, чтобы он имел height размер 100vh , чтобы все масштабировалось/помещалось в пределах высоты окна просмотра/браузера.

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

 <div class="container custom flex-column">

            <div class="row">
                <div class="col m-auto p-3"><h1 class="text-center">Company Directory</h1></div>
            </div>

            <div class="flex-row p-3 mb-2" id="searchAndGo">
                <div class="col flex-fill btn-group-sm">
                    <div class="input-group mb-3">
                        <input class="form-control" type="text" id="searchQuery" size="20" placeholder="Search Names">
                        <select id="locations" class="_locations">
                        </select>
                        <select id="departments" class="_departments">
                        </select>
                        <div class="float-end btn-group">
                            <button class="btn btn-success" id="startSearch" onclick="startSearch()">GO</button>
                            <button class="btn btn-danger" onclick="resetAll()">Reset</button>
                        </div>
                    </div>
                    
                    
                </div> 
                <div class="flex-row text-center">
                    <div class="dropdown" id="dropDownContainer">
                        <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false">
                            Advanced Settings
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2" id="radioSelect">
                            <li><span class="dropdown-item-text">Search by:</span></li>
                            <li><span class="dropdown-item"><input class="custom-control-input" id="any" type="radio" value="any" name="name" checked><label for="any">Any</label></span></li>                           
                            <li><span class="dropdown-item"><input class="custom-control-input" id="forename" type="radio" value="forename" name="name"><label for="forename">Forename</label></span></li>                           
                            <li><span class="dropdown-item"><input class="custom-control-input" id="surname" type="radio" value="surname" name="name"><label for="surname">Surname</label></span></li>                       
                        </ul>
                    </div>
                </div>
            </div>

            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                  <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-personnel" role="tab">Personnel</a>
                  <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-departments" role="tab">Departments</a>
                  <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-locations" role="tab">Locations</a>
                </div>
            </nav>

            <div class="tab-content container" id="myTabContent">
                <div class="tab-pane fade show active table-responsive" id="nav-personnel" role="tabpanel" aria-labelledby="personnel-tab">

                    <button id="addEntry" class="btn btn-success" onclick="openAddModal()">Add Personnel</button>


                        <table class='table table-striped table-hover' id="companyDirectoryPersonnel">
                            <thead>
                                <tr>
                                <th scope="col">Full Name</th>
                                <th scope="col">Location</th>
                                <th scope="col">Department</th>
                                <th scope="col">Edit</th>
                                <th scope="col">Delete</th>
                                </tr>
                            </thead>
                        </table>

                </div>
 

Я хочу использовать table-responsive класс начальной загрузки, чтобы добавить полосу прокрутки и прокрутить заголовок таблицы вместе с таблицей.

Я пробовал возиться с разными div буквами s, table но ни одна из них, похоже, не хочет придерживаться container custom div заданной высоты. Я пробовал использовать разные overflow правила css в основном контейнере и div в разных tables местах, и ни одно из них не работало так, как я надеялся. Я даже inherit примерил height , но я думаю div , что между table буквами » s «и основным содержанием текста слишком много букв «s» div

Вот мой текущий CSS, который используется на изображении 1 выше:

 body {
    background-color: #85daf1;
}

.custom {
    display: flex;
    background-color: hsl(47, 100%, 93%);
    height: 100vh;
}