Zwei Bootstrap-Tabellen nebeneinander

Ich möchte zwei Bootstrap-Tabellen nebeneinander setzen, wie es in dieser Frage beantwortet wird:Zwei Bootstrap-Tabellen nebeneinander

Two side by side tables in bootstrap

leider nicht das Ergebnis dort erwähnte ich erhalte.

Mein Code sieht wie folgt aus:

<html> 
<style> 
    body {background-color: black;} 
</style> 
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/> 
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/> 
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"/> 
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/> 
<link rel="stylesheet" type="text/css" href="css/ffw-spring.css"/> 
<link rel="stylesheet" type="text/css" href="css/ffw-spring-jqueryui.css"/> 
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/> 

<script type="text/javascript" src="webjars/datatables/1.10.5/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="js/dataTables.bootstrap.js"></script>   
<script type="text/javascript" src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script> 


<div class="row"> 
    <div class="col-xs-6"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Time</th> 
        <th>Location</th> 
        <th>Message</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
    <div class="col-xs-6"> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Time</th> 
        <th>Location</th> 
        <th>Message</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
</div>

Und was ich wie folgt aussieht:

Vielen Dank im Voraus

Quelle

2017-11-22 mrk

Sie haben Tippfehler in Ihrem Code. Sie müssen

<div class="col-sx-6">

mit

<div class="col-xs-6">

Quelle

2017-11-22 07:32:41

Vielen Dank für Ihre Beratung. Ich ersetzte es aber immer noch das gleiche Ergebnis .. Auch versucht, md und lg – mrk

@mrk versuchen, den Cache zu löschen, weil ich so etwas zuvor erlebt habe .. –

Sie sollten für alle Auflösungen wie unten etwas tun ersetzen:

col-lg-6 col-md-6 col-sm-6 col-xs-6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="row"> 
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
    <table class="table"> 
 
     <thead> 
 
     <tr> 
 
      <th>Time</th> 
 
      <th>Location</th> 
 
      <th>Message</th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    </div> 
 
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> 
 
    <table class="table"> 
 
     <thead> 
 
     <tr> 
 
      <th>Time</th> 
 
      <th>Location</th> 
 
      <th>Message</th> 
 
     </tr> 
 
     </thead> 
 
    </table> 
 
    </div> 
 
</div>

Quelle

2017-11-22 07:38:38 Pedram

Immer noch das gleiche Ergebnis :( – mrk

Bootstrap ist ein mobiles erstes Framework. Wenn Sie eine Klasse wie "col-xs-6" hinzufügen, wird es für die xs-Auflösung und höher funktionieren. Https://getbootstrap.com/docs/3.3/css/#grid – JasperZelf

* Es sollte nicht sein ... * Erklären Sie mehr, testen Sie auf 'desktop' und versuchen Sie, eine Live-Demo zur Verfügung zu stellen.Dieses Snippet funktioniert gut, das Problem ist also etwas anderes. – Pedram

Wenn Sie wollen zwei Tabellen (nebeneinander) in Handy-Bildschirm und Desktop-Bildschirm, dann - ändern Sie diese <div class="col-sx-6"> zu <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

Und wenn Sie zwei Tabellen im Desktop-Bildschirm und nicht im mobilen Bildschirm wollen. Ändern Sie diese <div class="col-sx-6"> zu <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">

Quelle

2017-11-22 07:42:16

Sie haben einen Tippfehler auf beiden Spalten gemacht. Sie haben col-sx-6 anstelle von col-xs-6 geschrieben. (Spalte, zeige es so auf extra kleinen Bildschirmen und größer, Breite 6)

Bei Verwendung von col-sx-6 ist es nur ein div, das 100% breit ist. Wenn Sie es auf col-xs-6 ändern, wird Ihr Problem behoben.

Auch in Bootstrap ist es üblich, Ihre <div class="row"> innerhalb einer <div class="container"> zu platzieren. See: https://getbootstrap.com/docs/3.3/css/#overview-container

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<h1>Your code, using col-xs-6</h1> 
 
<div class="row"> 
 
    <div class="col-sx-6"> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th>Time</th> 
 
        <th>Location</th> 
 
        <th>Message</th> 
 
       </tr> 
 
      </thead> 
 
     </table> 
 
    </div> 
 
    <div class="col-sx-6"> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th>Time</th> 
 
        <th>Location</th> 
 
        <th>Message</th> 
 
       </tr> 
 
      </thead> 
 
     </table> 
 
    </div> 
 
</div> 
 
<h1>Corrected code using col-xs-6</h1> 
 
<div class="row"> 
 
    <div class="col-xs-6"> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th>Time</th> 
 
        <th>Location</th> 
 
        <th>Message</th> 
 
       </tr> 
 
      </thead> 
 
     </table> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
     <table class="table"> 
 
      <thead> 
 
       <tr> 
 
        <th>Time</th> 
 
        <th>Location</th> 
 
        <th>Message</th> 
 
       </tr> 
 
      </thead> 
 
     </table> 
 
    </div> 
 
</div> 
 
</div>

Quelle

2017-11-22 07:54:05 JasperZelf

Versuchen Sein:

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

    <div class="row"> 

     <div class="col-lg-6 col-md-6 col-sm-12"> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th>Time</th> 
         <th>Location</th> 
         <th>Message</th> 
        </tr> 
       </thead> 
      </table> 
     </div> 
     <div class="col-lg-6 col-md-6 col-sm-12"> 
      <table class="table"> 
       <thead> 
        <tr> 
         <th>Time</th> 
         <th>Location</th> 
         <th>Message</th> 
        </tr> 
       </thead> 
      </table> 
     </div> 
    </div> 


    </body> 
    </html>

Quelle

2017-11-22 13:08:51

Zwei Bootstrap-Tabellen nebeneinander

Antwort

Verwandte Themen