Menu
Is it possible to display two tables, side-by-side, in Bootstrap 3?
Each tried making each one col-md-6 and, although it shrinks the width, they don't wrap next to each other (instead one is on top of the other in the full-width view).
<div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th class="col-md-1">#</th> <th class="col-md-2">Header</th> <th class="col-md-3">Header</th> </tr> </thead> <tbody> <tr> <td class="col-md-1">1,001</td> <td class="col-md-2">1,001</td> <td class="col-md-3">1,001</td> </tr> <tr> <td class="col-md-1">1,001</td> <td class="col-md-2">1,001</td> <td class="col-md-3">1,001</td> </tr> <tr> <td class="col-md-1">1,001</td> <td class="col-md-2">1,001</td> <td class="col-md-3">1,001</td> </tr> </tbody> </table> </div> <h2 class="sub-header">Latest Incidents</h2> <div class="table-responsive"> <table class="table table-striped"> <thead> <tr> <th class="col-md-1">#</th> <th class="col-md-2">Header</th> <th class="col-md-3">Header</th> </tr> </thead> <tbody> <tr> <td class="col-md-1">1,001</td> <td class="col-md-2">1,001</td> <td class="col-md-3">1,001</td> </tr> <tr> <td class="col-md-1">1,001</td> <td class="col-md-2">1,001</td> <td class="col-md-3">1,001</td> </tr> <tr> <td class="col-md-1">1,001</td> <td class="col-md-2">1,001</td> <td class="col-md-3">1,001</td> </tr> </tbody> </table> 
833
SQL joins allow you to combine two datasets side-by-side, but UNION allows you to stack one dataset on top of the other. Put differently, UNION allows you to write two separate SELECT statements, and to have the results of one statement display in the same table as the results from the other statement.
.table-striped. Adds zebra-striping to any table row within <tbody> (not available in IE8) Try it. .table-bordered. Adds border on all sides of the table and cells.
You need to wrap each table in a col-6 div, as opposed to applying col-6 to the table itself. Here is your code with col-xs-6 wrapped around:
<div class="col-xs-6"> <h2 class="sub-header">Subtitle</h2> <div class="table-responsive"> <table class="table table-striped">... And here it is in action: http://www.bootply.com/lbrQZF3152
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
