如何将一个表左对齐，一个对齐BOOTSTRAP

Question

I have two tables, and I would like to align one to the left and the other to the right - but I am having some trouble.

This is my 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>";

?>

Is it even possible to have two tables on the same page where one is on the left and the other is on the right and is responsive and scrolls down?

How do I go about achieving this?

Thanks

Answer 1

try to make css class with !important code in it

example:

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

and try it to put into your classes

some bootstrap classes are being inherited by the classes of their parent. but by using !important code; it will not be changed by the parent

Hope it helps...