html - Show two tables in line to each other within an offset -
i've 2 tables places beneath each other.
the second table summary of first 1 , have less columns first. want display second table offset. second table have slight offset, won't display in-line each other.
open snippet fullscreen see example.
how can fix both tables displayed smoothly?
here's screenshot further clarification.
i want 2 lines start on 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">∑ 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">∑ money</th> </tr> </thead> <tbody> <tr> <td>name</td> <td>123</td> <td>154 €</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </body>
you have adjust left-padding of second table container "col-sm-9" breakpoint when 12 column grid layout sets in...
the problem columns have gutter of 30px in total , table cells gutter of 24px - that's not matching , leads missalignment. has corrected somehow. solution either adjusting 1 or other...
Comments
Post a Comment