Bootstrap 4表格不佔用標籤內容div中的完整水平空間

Question

我想讓我的引導表填充所有可用的水平空間。

當我走在table docs演示表（其中做填補引導文檔頁面上所有的垂直空間），他們不填我的網站上所有的橫向空間。我能想到的唯一的事情就是我的桌子在tab-content格內 - 這會有所作爲嗎？

<div class="col-md-7 col-lg-8 col-xl-9"> 
    <div class="row"> 
     <div class="tab-content" id="nav-tabContent"> 
      <table class="table table-responsive"> 
       ... 

我也試過：

<div class="col-md-7 col-lg-8 col-xl-9"> 
    <div class="row"> 
     <div class="tab-content" id="nav-tabContent"> 
      <div class="container-fluid"> 
       <table class="table table-responsive"> 
        ... 

，

<div class="col-md-7 col-lg-8 col-xl-9"> 
    <div class="row"> 
     <div class="tab-content" id="nav-tabContent"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <table class="table table-responsive"> 
         ... 

但這些似乎絕望和不工作。我錯過了什麼？ 如何讓我的表響應，填充列div中可用的任何水平空間？

Answer 1

是的，問題是因爲tab-content股利。你有兩個選項，要麼刪除它，要麼將CSS添加到該div，以使其具有與表格相同的寬度樣式。你需要做的就是添加一個新的類或者對這個類應用不同的CSS。如果您在該頁面上有其他tab-content的引用，我會建議添加一個類。喜歡的東西：

.tab-contentOverride { 
    width: 100%; 
    max-width: 100%; 
} 

並檢查了我codepen的區別：

https://codepen.io/egerrard/pen/BwYJYa