CODEWITHSUNDEEP
phphtmltwitter-bootstrap
user6077139
user6077139

Reputation:

How to align one table to the left and one to the right BOOTSTRAP

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

Upvotes: 0

Views: 2337

Answers (2)

Lin Yang
Lin Yang

Reputation: 11

you may try like this:

<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>

Upvotes: 1

Darence30
Darence30

Reputation: 103

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...

Upvotes: 0

Related Questions