2016-04-06 7 views
0

私は2つのテーブルを持っています。私は1つを左に、もう1つは右に並べたいですが、何か問題があります。テーブルを左に1つ、右に1つ並べる方法BOOTSTRAP

これは私のコードです:

<!-- 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>"; 

?> 

は1つが左側にあり、他方が右側にあり、ダウン応答やスクロールで同じページに2つのテーブルを持っている、それも可能ですか?

これを達成するにはどうすればよいですか?

おかげ

+0

あなたは左引き、右のプルしようとしたことがありますか? –

+0

また、2番目のテーブルの

はどこにありますか? –

答えて

0

それに!importantコードでCSSクラスを作ってみる

例:

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

といくつかのブートストラップクラスを継承しているあなたのクラスに

を入れて、それを試してみてください彼らの親のクラスによって。しかし!importantコードを使用することによって;それは

はそれが役に立てば幸い親によって変更されることはありません...

1

あなたは、このようにしてみてください可能性があります

<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> 
関連する問題