如何将一张桌子左对齐，另一张桌子右对齐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

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>

Answer 2

try to make css class with !important code in it 尝试使用!important代码制作CSS类

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; 但是使用!important代码； it will not be changed by the parent 父级不会更改

Hope it helps... 希望能帮助到你...

如何将一张桌子左对齐，另一张桌子右对齐BOOTSTRAP

问题描述

2 个解决方案

解决方案1
1 2016-08-05 03:37:51

解决方案2
0 2016-08-05 03:23:18

如何将一张桌子左对齐，另一张桌子右对齐BOOTSTRAP

问题描述

2 个解决方案

解决方案1 1 2016-08-05 03:37:51

解决方案2 0 2016-08-05 03:23:18

解决方案1
1 2016-08-05 03:37:51

解决方案2
0 2016-08-05 03:23:18