CODEWITHSUNDEEP
htmlcsshtml-table
Simple
Simple

Reputation: 23

two tables side by side

I am new to css. I want to put two tables side by side. This is what I got.(Using bootstrap) two tables

I want to position the 'Pizza's' table at the middle of the page. I want the other table right side of the 'Pizza's' table.

My css:

.table2{

  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.table2 td{
  padding: 2px;
}

.table2 th{
  background-color: #d9534f;
  padding: 2px;
}

.table3{
  width: 300px;
  margin-left: auto;
  margin-right: 60px;
}

.table3 td{
  padding: 2px;
}

.table3 th{
padding: 2px;
}

my html:

<div class="table2">
  <h2>Table</h2>

  <div class="table-borderless">          
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Pizza's</th>
        <th>-</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Margharita</td>
        <td> $7.00 </td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

<div class="table3" >
  <h2>Table</h2>
  <div class="table-responsive">          
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Totaal</th>
        <th>-</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Margharita</td>
        <td> $7.00 </td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

I succeed when I float one to left and other to right, but that is not what I want. I tried this also:

.table3{
  margin-left: 10px;
  display: inline-block;
}

Thanks in advance

Upvotes: 0

Views: 3226

Answers (1)

Derek Story
Derek Story

Reputation: 9583

You want to tell both of the wrappers to be inline-block

JS Fiddle

.table2, .table3 {display: inline-block;}

Upvotes: 2

Related Questions