Wie man eine Tabelle nach links und eine nach rechts richtet BOOTSTRAP

Ich habe zwei Tabellen, und ich möchte eine nach links und die andere nach rechts ausrichten - aber ich habe einige Probleme.Wie man eine Tabelle nach links und eine nach rechts richtet BOOTSTRAP

Dies ist mein Code:

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

<?php 

    print 
    "<div class='container'>". 
     "<table class='table'>". 
     "<tr>". 
      "<th class='text-left'>Product Shot</th>". 
      "<th class='text-center'>Product Description</th>". 
      "<th class='text-center'>Quantity</th>". 
      "<th class='text-center'>Total</th>". 
     "</tr>". 
    "</table>"; 

    print 
     "<tr>". 
      "<td><b>Grand total: </b></td>". 
      "<td><strong>'TOTAL'</strong></td>". 
      "<td>". 
       "<a href='#'><button class='btn btn-success'> Checkout</button></a>". 

       "<a href='remove_all_items.php'><button class='btn btn-danger'> Remove </button></a>". 

       "</a>". 
      "</td>". 
    "</tr>"; 

?>

Ist es sogar möglich, zwei Tabellen auf der gleichen Seite zu haben, wo man auf der linken Seite und der andere ist auf der rechten Seite und spricht und blättert nach unten?

Wie gehe ich vor?

Dank

Quelle

2016-04-06 Anonymous

Haben Sie versucht, ziehen links und rechts ziehen? –

Auch, wo ist die

für Ihre zweite Tabelle? –

Antwort

versuchen CSS-Klasse mit !important Code darin

Beispiel zu machen:

txtleft 
{ 
    text-align:left !important; 
} 
txtryt 
{ 
    text-align:right !important; 
} 
txtcent 
{ 
    text-align:center !important; 
}

und versuchen, es zu setzen in Ihren Klassen

einige Bootstrap-Klassen geerbt werden durch die Klassen ihrer Eltern. aber mit !important Code; es wird nicht von der Mutter

es hilft ...

Quelle

2016-08-05 03:23:18 Darence30

Hoffnung geändert werden Sie können wie folgt versuchen:

<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6"> 
     <table> 
      <tr> 
       <td>left</td> 
       <td>left</td> 
      </tr> 
     </table> 
     </div> 
     <div class="col-xs-6"> 
     <table> 
      <tr> 
       <td>right</td> 
       <td>right</td> 
      </tr> 
     </table> 
     </div> 
    </div> 
</div> 
</body>

Quelle

2016-08-05 03:37:51

Verwandte Themen