Kruthika
Kruthika

Reputation: 75

Displaying two tables in a row in bootstrap

How to add two tables in a row in bootstrap? enter image description here

As shown in the image

Upvotes: 0

Views: 3972

Answers (1)

Abhishek Ghosh
Abhishek Ghosh

Reputation: 2706

Here is the fiddle : http://jsfiddle.net/Lpcu3so6/4/

You can use the class row in bootstrap and then divide your page like this :

<div class="row">
    <div class="col-md-6">
       <!--table1 -->
    </div>
    <div class="col-md-6">
       <!--table2 -->
    </div>
</div>

This will give you two div with both occupying equal space. This is according Bootstrap's Grid View System


You can also try one thing : Design two tables and give both of them float left like this :

<div>
  <table style="float: left">
    <tr>
      <td>..</td>
    </tr>
  </table>
  <table style="float: left">
    <tr>
      <td>..</td>
    </tr>
  </table>
</div>

or simply use css:

div>table {
  float: left
}

Upvotes: 3

Related Questions