使用 bootstrap/css 使 2 個 div 具有相同的高度和寬度

Question

我正在嘗試使用這些代碼使表格的這兩個 div 具有相同的高度和寬度

<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

.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;
}

在表格類中添加 text-nowrap 后，我的表格現在看起來像這樣，那么如何將 div 過濾器修復為與表格標題相同的高度和寬度？ 現在的樣子

太感謝了？

Answer 1

我用 Bootstrap 4.6.1 進行了測試，但這個問題也出現在版本 5 中。問題在於較小的瀏覽器寬度，表格寬度比 Bootstrap 容器寬。 由於默認情況下 HTML 表格永遠不會換行或縮小到小於其列允許的尺寸，這就是導致寬度不匹配的原因。 我已經通過在表格周圍添加一個包裝器進行了調整，該包裝器將適合容器並允許水平滾動表格，但這可能不是您正在尋找的關於 UI 的內容。 但是必須對滾動、允許表列名稱換行或將它們更改為下拉列表等進行一些調整。

即使您使用 flexbox 代替表格，在某些時候標題也會太小而無法水平放置在一行中。

至於高度，根據您要更改的高度，您需要調整.table td, .table th或.tab a上的填充

 .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; } .table-wrapper { width: 100%; overflow-x: scroll; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <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-wrapper"> <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> </div>