CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
KhorneHoly
KhorneHoly

Reputation: 4766

Show two tables in line to each other within an offset

I've two tables that are places beneath each other.

The second table will be a summary of the first one and will have less columns than the first. So I want to display the second table with an offset. Now the second table will have a slight offset, so that they won't display in-line to each other.

Open the snippet to fullscreen to see the example.

How can I fix this so that both tables will be displayed smoothly?

Here's a screenshot for further clarification.

enter image description here

I want that those two lines start on the same width.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="wrapper">
        <div class="page-wrapper">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                    <div class="table-responsive">
                        <table class="table table-condensed table-bordered small">
                            <thead>
                                <tr>
                                    <th class="col-sm-3">One</th>
                                    <th class="col-sm-3">Two</th>
                                    <th class="col-sm-2">Three</th>
                                    <th class="col-sm-2 text-right"># Number</th>
                                    <th class="col-sm-2 text-right">&sum; Money</th>
                               </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Name</td>
                                    <td>Two</td>
                                    <td>Lorem Ipsum</td>
                                    <td>123</td>
                                    <td>154 €</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3">
                    HELLO WORLD
                </div>
                <div class="col-sm-9">
                    <div class="table-responsive">
                        <table class="table table-condensed table-bordered small">
                            <thead>
                                <tr>
                                    <th class="col-sm-5">One Big Name</th>
                                    <th class="col-sm-2 text-right"># Number</th>
                                    <th class="col-sm-2 text-right">&sum; Money</th>
                               </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Name</td>
                                    <td>123</td>
                                    <td>154 €</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Upvotes: 0

Views: 63

Answers (3)

Kjell
Kjell

Reputation: 832

You have to adjust the left-padding of the second table container "col-sm-9" for the breakpoint when the 12 column grid layout sets in...

The problem is actually that columns have a gutter of 30px in total and your table cells a gutter of 24px - that's not matching and leads to missalignment. This has to be corrected somehow. The solution is either adjusting the one or the other...

Upvotes: 3

Code Uniquely
Code Uniquely

Reputation: 6373

in your table you have three columns that have widths

class="col-sm-5"
class="col-sm-2"
class="col-sm-2"

but these are inside a div that has a class of 'col-sm-9' associated so they will be 9/12 of the space taken up by the 3/4 of the width under the 'col-sm-9' for the div.

You could work out what the new values as a percentage of the 3/4 are but these will not be exact values of col-sm-?. The 5 would need to become col-sm-6.666666666 and the 2 would need to become col-sm-2.666666666 neither of which exist. The closest you can get is col-sm-6 and col-sm-3 which won't align with the preceding table (but will be better than you have).

If you want the columns to align very closely (but not always perfect) then you'll have to use DIVS and calculate the percentages to many decimal places. You could use flex box layouts or you could (but decimal point rounding will cause differences especially as you resize).

or use 'known' fixed widths for the two sets of columns and handle the overflow of content in each column 'intelligently'.

or use a dummy column in table and style it to look like the background instead ...

Upvotes: 0

RasmusGlenvig
RasmusGlenvig

Reputation: 765

I'm not quite sure what you exactly want, but if you want the second row to have an offset, you could do like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="wrapper">
        <div class="page-wrapper">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                    <div class="table-responsive">
                        <table class="table table-condensed table-bordered small">
                            <thead>
                                <tr>
                                    <th class="col-sm-3">One</th>
                                    <th class="col-sm-3">Two</th>
                                    <th class="col-sm-2">Three</th>
                                    <th class="col-sm-2 text-right"># Number</th>
                                    <th class="col-sm-2 text-right">&sum; Money</th>
                               </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Name</td>
                                    <td>Two</td>
                                    <td>Lorem Ipsum</td>
                                    <td>123</td>
                                    <td>154 €</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-9 col-md-offset-3">
                    <div class="table-responsive">
                        <table class="table table-condensed table-bordered small">
                            <thead>
                                <tr>
                                    <th class="col-sm-5">One Big Name</th>
                                    <th class="col-sm-2 text-right"># Number</th>
                                    <th class="col-sm-2 text-right">&sum; Money</th>
                               </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Name</td>
                                    <td>123</td>
                                    <td>154 €</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

Upvotes: -1

Related Questions