CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
okoboko
okoboko

Reputation: 4482

Two Side-by-Side Tables in Bootstrap

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>

Upvotes: 21

Views: 68986

Answers (4)

TelloEngineer
TelloEngineer

Reputation: 11

I have a better solution. this solution worked for everyone. use a container (like div), this will contain every table you have, after this, to this container you will put: style="display: flex " its almost finish, you will have the tables in one line, the last thing is put borders, and its all. flex will positioning your tables in equal parts, filling all the window you have, no matter the window size. reference: https://developer.mozilla.org/es/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox I post a simple example:

<div style="display: flex ">
<table class="table table-striped table-hover" id="table1">
    <thead class="table-dark">
        <tr>
            <th class="text-center">data</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center" colspan="3">data</td>
        </tr>
        <tr>
            <td>data</td>
        </tr>
    </tbody>
</table>
<table class="table table-striped table-hover">
    <thead class="table-dark">
        <tr>
            <th class="text-center">data</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-center" colspan="3">data</td>
        </tr>
        <tr>
            <td>data</td>
        </tr>
    </tbody>
</table>

Upvotes: 1

karlingen
karlingen

Reputation: 14625

Shawn and kmo already pointed out that using col-md-6 class will make this work. I would also like to add that if you are doing this inside an ul and li things might break.

The solution is quite simple though. Just add a div with the class row before:

<div class="row">
  <div class="table-responsive col-md-6">
      <table>...</table>
  </div>
  <div class="table-responsive col-md-6">
      <table>...</table>
  </div>
</div>

Upvotes: 15

Shawn Taylor
Shawn Taylor

Reputation: 15740

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

Upvotes: 29

kmo
kmo

Reputation: 264

Add your col-md-6 class to each wrapping div so you have this structure:

<div class="table-responsive col-md-6">
    <table>...</table>
</div>
<div class="table-responsive col-md-6">
    <table>...</table>
</div>

Upvotes: 18

Related Questions