Boostrap-Tabellenfußzeile wird unten nicht angezeigt

Question

Ich habe eine Bootstrap-responsive-Tabelle in meinem AspNet-Web-API-Projekt, die mir Fußtext in der Tabelle nicht zeigt. Mein Fußtext wird oben auf der Seite außerhalb der Tabelle angezeigt. Ich meine, ich versuche, die Fußzeile des Bootstrap-modal nach unten zu halten, aber das kann ich nicht, das ist meine HTML-Struktur:

<div class="container"> 

<div class="table-responsive"> 
     <table class="table table-bordered table-hover" id="Countries"> 
      <thead> 
       <tr> 
        <th> 
         CountryId 
        </th> 
        <th> 
         CountryName 
        </th> 


        <th class="col-md-2"> 
         Action 
        </th> 
       </tr> 
      </thead> 
      <tbody class="tbody"></tbody> 
      <tfoot> All text I put here shows at the top of the page outside of the table</tfoot> 

     </table> 
    </div> 
</div> 

Answer 1

Dies ist sehr einfach, weil Sie keine Zeile in der Fußzeile definiert haben, das ist Warum. Und denken Sie auch daran, Tabellen-responsive Klasse nur mit Tabelle statt mit Div zu verwenden.

Schauen Sie unter dem Code.

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script> 
 

 

 

 
<div class="container"> 
 
    <table class="table table-responsive table-bordered table-hover" id="Countries"> 
 
    <thead> 
 
     <tr> 
 
     <th> 
 
      CountryId 
 
     </th> 
 
     <th> 
 
      CountryName 
 
     </th> 
 
     <th> 
 
      Action 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="tbody"></tbody> 
 
    <tfoot> 
 
     <tr> 
 
     <td colspan="3">All text you were puting here was shown at the top of the page outside of the table but now it is not.</td> 
 
     </tr> 
 
    </tfoot> 
 
    </table> 
 
</div>