CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
alemol
alemol

Reputation: 8642

How to align two tables in the same row inside a Bootstrap Panel?

I want to put side-by-side two tables in the same grid-row but tables just stack over when run the code below:

<body>
...
<div class="container-fluid">
<div class="starter-template">

<div class='panel panel-primary'>
<div class='panel-heading'><h1>Main Title</h1></div>
<div class='panel-body'>

<div class='row-fluid'>
 <h4>Title</h4>
 <div class='span4'>
   <table class='table table-bordered'>
      <thead>
        <tr><th>feat1</th><th>feat2</th></tr></thead>
      <tbody>
      <tr><td>132</td><td>value a</td></tr>
      <tr><td>114</td><td>value b</td></tr>
      </tbody>
    </table>
  </div><!--closes table1-->

  <div class='span4'>
   <table class='table table-bordered'>
   <thead>
   <tr><th>feat1</th><th>feat3</th></tr>
      </thead>
      <tbody>
        <tr><td>264</td><td>val b</td></tr>
        <tr><td>3</td><td>val c</td></tr>
      </tbody>
    </table>
  </div><!--closes table2-->

</div>

</div><!--closes div panel-body-->
</div><!--closes div panel-->
</div> <!-- /.starter-template -->
</div><!-- /.container -->
...
</body>

The result is one table in all the row and then the second one below the first one.

Upvotes: 3

Views: 8535

Answers (1)

Aaron
Aaron

Reputation: 1208

Check out the fiddle Use col-xs-6 if you still want to display the tables side by side when on smaller screens. Use col-lg-6 if you want to display the tables on separate rows on smaller screens. http://jsfiddle.net/DTcHh/1680/

<div class="row-fluid">
   <div class="col-xs-6">
      <div class="table-responsive">
         <table class="table table-bordered">
            <thead>
               <tr>
                  <th>One</th>
                  <th>One</th>
                  <th>One</th>
               </tr>
            <thead>
            <tbody>
               <tr>
                  <td>Two</td>
                  <td>Two</td>
                  <td>Two</td>
            </tbody>
         </table>
      </div>
   </div>
   <div class="col-xs-6">
      <div class="table-responsive">
         <table class="table table-bordered">
            <thead>
               <tr>
                  <th>One</th>
                  <th>One</th>
                  <th>One</th>
               </tr>
            <thead>
            <tbody>
               <tr>
                  <td>Two</td>
                  <td>Two</td>
                  <td>Two</td>
         </table>
      </div>
   </div>
</div>

Upvotes: 5

Related Questions