Як зробити кнопку, щоб вона відкривала повноекранну картку в таблиці

6 Березня 2024 в 18:40 211

Чи є спосіб створити кнопку в таблиці, яка відкриває картку, що відкриває весь екран? Я створив таблицю з кнопкою, яка відкриває картку при натисканні. Однак карта лише вкриває частину таблиці, коли я хочу, щоб вона покривала всю таблицю, займаючи розмір вмісту в картці. Як цього досягти? Я пробував використовувати клас container для обгортання таблиці та картки, а також CSS для стилізації картки, але ніщо не працює.

Ось код:

<div class="container">
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of users">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.age }}</td>
                <td><button (click)="toggleCard()">View</button></td>
                <div class="card" *ngIf="showCard" style="width: 50rem;">
                    <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
            </tr>
        </tbody>
    </table>
</div>

<thead>

<tr>

<th>Action</th>

</tr>

</thead>

<tbody>

<h5 class="card-title">Card title</h5>

<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h5>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

<a href="#" class="card-link">Another link</a>

</div>

</tr>

</tbody>

</table>

</div>

.container {
    position: relative;
    background-color: black;
}
.card {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 999;
}

.container {

position: relative;

background-color: black;

}

.card {

position: relative;

top: 0;

left: 0;

width: 100%;

height: auto;

z-index: 999;

}

Щоб зробити картку вкривати всю таблицю, потрібно налаштувати CSS та структуру HTML. По-перше, переконайтеся, що

обгортає всю таблицю та картку. Цей контейнер служить посиланням для позиціонування картки.

Далі налаштуйте CSS для класу .card. Встановіть position: absolute; замість relative, і видаліть top: 0; left: 0;, оскільки вони зайві. Також встановіть height: 100%;, щоб картка займала всю висоту свого контейнера.

Зробивши ці налаштування, картка повинна тепер покривати всю таблицю при відкритті, займаючи розмір вмісту всередині неї.