ブートストラップ4テーブルがタブコンテンツのdiv内に完全な水平スペースを占めていない

Question

ブートストラップテーブルを使用可能なすべての水平スペースに塗りたいですか？私は（は、ブートストラップドキュメントページ上のすべての垂直方向のスペースを埋めるを行う）table docsからデモテーブルを取るとき

することは、彼らが自分のサイト上のすべての水平方向のスペースを埋めるしないでください。私が考えることができるのは、私のテーブルがtab-content divの中にあるということだけです。違いがありますか？

<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"> 
         ... 

しかし、これらは絶望的に見えると動作しません。私は何が欠けていますか？ テーブルを反応させるにはどうすればいいですか？

Answer 1

はい、問題はtab-content divです。 2つのオプションがあります。削除するか、そのdivにCSSを追加してテーブルと同じ幅のスタイルにします。新しいクラスを追加するか、そのクラスに異なるCSSを適用するだけです。あなたがそのページにtab-contentの他の参照を持っている場合に備えて、クラスを追加することをお勧めします。以下のような何か：

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

点と相違点のための私のcodepenをチェックアウト：

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