Bootstrap 4 Le dimensionnement de la colonne de table ne répond pas comme prévu

Question

Étant nouveau dans le bootstrap et les scripts avec html/css en général, j'essaye de créer une simple table html (une ligne avec trois colonnes). Chaque colonne doit être paire (en prenant un tiers de la table qui existe à l'intérieur) Le problème que je rencontre est qu'il semble ne prendre que les deux tiers (2/3) de l'espace disponible avec dans le tableau . Je l'ai regardé sur internet pour des solutions, googlé, lu plusieurs messages/articles sur pile et d'autres endroits, mais je ne l'ai pas trouvé une solution et espère de l'aide.

You can see a straight html render of the error here

Voici une image détaillant la question:

Comme l'image exemple montre la mince r La colonne ed occupe un tiers de l'espace de la table (table à bordure verte), mais cette table n'est pas en expansion pour occuper tout l'espace disponible dans la div rouge. J'ai cherché à travers le rendu html et pas trouvé une cause pour le problème.

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

Voici les déclarations CSS/liens

<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

Pourquoi utilisez-vous la table? Vous pouvez gérer tout cela avec le système de grille bootstrap. Évitez d'utiliser la table dans votre projet. Mais je vais vous suggérer de lui donner une largeur:

td{width:100% !important;} 

Essayez de le faire, il peut vous aider.