ブートストラップ4テーブルのサイズが期待通りに応答しない

Question

一般的にブートストラップとスクリプトでhtml/cssを使用していないため、単純なhtmlテーブル（3列の1行）を作成しようとしています。それぞれの列は、偶数（テーブルの3分の1を占めている）です。私が直面している問題は、テーブル内で使用可能なスペースのわずか2/3しか占めていないようです。私は解決策のためのインターネット上で見てきた、グーグル、スタックや他の場所にいくつかの記事/記事を読んで、私は解決策を見つけていませんでした、助けを期待しています。

You can see a straight html render of the error hereをここにあります例えば、画像が薄くRを示すよう

：問題の詳細画像テーブルのスペースの3分の1（緑色の枠線付きのテーブル）を占めていますが、テーブルは展開されておらず、赤いdivで使用できる全領域を占有しています。私はhtmlレンダリングを探していて、問題の原因は見つけられませんでした。ここで

<div class="area"> 
     <section class="wrapper scrollable"> 
      <div class="main-grid"> 
       <div class="agile-grids"> 
        <!-- blank-page --> 
        <div class="blank"> 
         <div class="blank-page"> 
          <h1>Session is active</h1> 


<table class=" " style="border: 1px solid red;"> 
    <tbody> 
     <tr scope="row" style="border: 1px solid red;"> 
      <td class="text-center" style="border: 1px solid green;"> 
       <div class="col-lg-4 col-md-6 col-sm-12" style="border: 1px solid red;"> 
       <div class="card_user-charProfile"> 
        <img class=" img-fluid" style="width: 100%;" src="http://localhost/wBase/zUploads/cImg/3bgCard.jpg" alt="Wiccan"> 

        <div class="card"> 
         <div class="card"> 
          <p> content goes here</p></div> 
         </div> 
        </div> <!-- end row --> 
       </div><!-- end CHARACTER PROFILE OUTER DIV --> 
      </td> 
     </tr>        
    </tbody> 
</table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 
</div> 

は、なぜあなたは、テーブルを使用している

<script language="JavaScript" type="text/javascript"> 
    <!-- This JS disallows hijacking into someone else's frame... 
    if (top.location != self.location){top.location=self.location} 
    //--> 
</script> 

<link href="../__themes/bs4_marvelCSS/bs4_bootstrap.css" rel="stylesheet"> 

<!-- Custom styles for this template --> 
<link href="../__themes/bs4_marvelCSS/bs4_dashV3.css" rel="stylesheet"> 
<link href="../__themes/bs4_marvelCSS/style_sticky-footer-navbar.css" rel="stylesheet"> 
<link href="../__themes/bs4_marvelCSS/bs4_dashTweaks.css" rel="stylesheet"> 


<!-- font CSS --> 

<!-- roboto --> 
<link href="//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic" rel="stylesheet" type="text/css"> 

<!-- lato --> 
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 

<!-- hammersmith one --> 
<link href="https://fonts.googleapis.com/css?family=Hammersmith+One" rel="stylesheet"> 


<!-- __themes/_fonts/font-glyphicons.css --> 
<link href="../__themes/bs4_marvelCSS/font.css" rel="stylesheet"> 
<link href="../__themes/bs4_marvelCSS/font-awesome.css" rel="stylesheet"> 
<link href="../__themes/bs4_marvelCSS/font-glyphicons.css" rel="stylesheet"> 

<script type="application/x-javascript">addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> 

<script> 
    $(function() { 
    $("#supported").text("Supported/allowed: " + !!screenfull.enabled); 
    if (!screenfull.enabled) { 
     return false; 
    } 
    $("#toggle").click(function() { 
     screenfull.toggle($("#container")[0]); 
    }); 
}); 
</script> 

Answer 1

リンク/ CSS宣言していますか？ブートストラップ・グリッド・システムを使ってすべてを処理できます。プロジェクトでテーブルを使用しないでください。しかし、私はそれに幅を与えることをお勧めします：

td{width:100% !important;} 

これを試してみてください。