I'm attempting to ensure that these two divs within a table have the same height and width using the following code:
<div class="container">
{{#if orders}}
<div class="filter">
<ul class="nav nav-pills tab ">
<li class="nav-item">
<a class="nav-link tablinks active" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cars</a>
<li class="nav-item">
<a class="nav-link" href="#">Servicing</a>
</li>
</ul>
</div>
<div class="table">
<table class="table tab text-nowrap">
<thead>
<tr>
<th>Order ID</th>
<th>Customer ID</th>
<th>Product ID</th>
<th>Product Name</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
<th>Order Date</th>
<th>Delivery Status</th>
<th></th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
CSS Styles:
.nav-pills .nav-link.active {
background-color: #8B0000;
color: white;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
color: black;
}
.tab a {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
color: #000000;
}
thead th {
background-color: #8B0000;
color: white;
}
Upon adding the "text-nowrap" class in the table, the table layout has changed. How can I adjust the "filter" div to match the width and height of the table header?
Here is how it currently looks: Link to Image
Thank you for your assistance!