CODEWITHSUNDEEP
twitter-bootstrap
Raghav Motwani
Raghav Motwani

Reputation: 169

Tables in Bootstrap not properly aligned

I have been trying to implement two tables using the "column" class in Bootstarp.
Here's a fiddle.

<div class="container">
    <div class="col-md-8">
        <div class="well">
            <table class="table table-hover">
                <tr>
                    <td><b>First name</b></td>
                    <td><b>last name</b></td>
                    <td><b>Age</b></td>
                    <td><b>phone</b></td>
                    <td><b>Address</b></td>
                    <td><b>D.O.J</b></td>
                </tr>
                <tr class="info">
                    <td>Rohit</td>
                    <td>Sinha</td>
                    <td>22</td>
                    <td>211232</td>
                    <td>Kandivali</td>
                    <td>22/7/12</td>
                </tr>
                <tr class="danger">
                    <td>John</td>
                    <td>Smith</td>
                    <td>40</td>
                    <td>434560</td>
                    <td>Borivali</td>
                    <td>22/7/12</td>
                </tr>
                <tr class="default">
                    <td>Kartikeya</td>
                    <td>Gupta</td>
                    <td>40</td>
                    <td>403453</td>
                    <td>Kandivali</td>
                    <td>22/7/12</td>
                </tr>
                <tr class="danger">
                    <td>John</td>
                    <td>Smith</td>
                    <td>40</td>
                    <td>234540</td>
                    <td>Kandivali</td>
                    <td>22/7/12</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col-md-4">
        <div class="well">
            <table class="table table-hover">
                <tr>
                    <td><b>First name</b></td>
                    <td><b>last name</b></td>
                    <td><b>Age</b></td>
                    <td><b>phone</b></td>
                    <td><b>Address</b></td>
                    <td><b>D.O.J</b></td>
                </tr>
                <tr class="info">
                    <td>Lalit</td>
                    <td>Bassi</td>
                    <td>22</td>
                    <td>211232</td>
                    <td>Kandivali</td>
                    <td>22/7/12</td>
                </tr>
                <tr class="danger">
                    <td>John</td>
                    <td>Smith</td>
                    <td>40</td>
                    <td>434560</td>
                    <td>Borivali</td>
                    <td>22/7/12</td>
                </tr>
                <tr class="default">
                    <td>Kartikeya</td>
                    <td>Gupta</td>
                    <td>40</td>
                    <td>403453</td>
                    <td>Kandivali</td>
                    <td>22/7/12</td>
                </tr>
                <tr class="danger">
                    <td>John</td>
                    <td>Smith</td>
                    <td>40</td>
                    <td>234540</td>
                    <td>Kandivali</td>
                    <td>22/7/12</td>
                </tr>
            </table>
        </div>
    </div>
</div>

Problems:

  1. When I use column-md-8 and column-md-4, the height of two tables changes, How to handle this and why this is happening?

  2. The "well" class is erroneous for table 2 at 1200px.

Upvotes: 0

Views: 124

Answers (1)

wooer
wooer

Reputation: 1717

Changing <div class="container"> to <div class="container-fluid"> should fix the 1200px problem. Refer to the containers heading in the CSS page of bootstrap.

But for small sizes I believe your table is wider than its container because of its contents that's why its not fitting there.

  • you might look for responsive table options or if you hard code your table you might want yo hide some columns using (.hidden-xs, .hidden-sm, etc.)

  • You can change the number of columns each table fill for each screen size by extending your columns css class definiton:

    col-lg-6 col-md-6 col-sm-12 col-xs-12

so what I propose for this very situation is (jsFiddle):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tables</title>
        <meta name="description" content="Hello World">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="well">
                        <table class="table table-hover">
                            <tr>
                                <td>
                                    <b>First name</b>
                                </td>
                                <td>
                                    <b>last name</b>
                                </td>
                                <td>
                                    <b>Age</b>
                                </td>
                                <td>
                                    <b>phone</b>
                                </td>
                                <td>
                                    <b>Address</b>
                                </td>
                                <td>
                                    <b>D.O.J</b>
                                </td>
                            </tr>
                            <tr class="info">
                                <td>Rohit</td>
                                <td>Sinha</td>
                                <td>22</td>
                                <td>211232</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="danger">
                                <td>John</td>
                                <td>Smith</td>
                                <td>40</td>
                                <td>434560</td>
                                <td>Borivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="default">
                                <td>Kartikeya</td>
                                <td>Gupta</td>
                                <td>40</td>
                                <td>403453</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="danger">
                                <td>John</td>
                                <td>Smith</td>
                                <td>40</td>
                                <td>234540</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <div class="well">
                        <table class="table table-hover">
                            <tr>
                                <td>
                                    <b>First name</b>
                                </td>
                                <td>
                                    <b>last name</b>
                                </td>
                                <td>
                                    <b>Age</b>
                                </td>
                                <td>
                                    <b>phone</b>
                                </td>
                                <td>
                                    <b>Address</b>
                                </td>
                                <td>
                                    <b>D.O.J</b>
                                </td>
                            </tr>
                            <tr class="info">
                                <td>Lalit</td>
                                <td>Bassi</td>
                                <td>22</td>
                                <td>211232</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="danger">
                                <td>John</td>
                                <td>Smith</td>
                                <td>40</td>
                                <td>434560</td>
                                <td>Borivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="default">
                                <td>Kartikeya</td>
                                <td>Gupta</td>
                                <td>40</td>
                                <td>403453</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                            <tr class="danger">
                                <td>John</td>
                                <td>Smith</td>
                                <td>40</td>
                                <td>234540</td>
                                <td>Kandivali</td>
                                <td>22/7/12</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Latest compiled and minified JavaScript -->
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </body>

</html>

Upvotes: 1

Related Questions