I'm having an issue with a table and card setup. When I click the button in the table, the card that appears only covers part of the table. I want it to cover the entire table area based on the content inside the card. How can I make this happen?
I've tried using the .container class to wrap the table and card, as well as applying CSS styling to the card element, but so far nothing has worked.
Here is the code snippet:
<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</h6>
<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>
and css:.container{
position:relative;
background-color: black;
}
.card{
position:relative;
top:0;
left:0;
width:100%;
height:auto;
z-index: 999;
}