Search code examples
htmlhtml-table

html table side by side: <table style="float: left;"> does not work

My goal is to put two tables side by side. I've followed following guide: https://stackoverflow.com/a/11690480/2402577

<table style="float: left;">

My example code:

<div class="container" id="coverpage">
  <div class="row">
     <table id="tableblock" class="display" width="100%" style="float:left"><caption><h3>Latest Blocks</h3></table>
     <table id="tabletxs"   class="display" width="100%" style="float:left"><caption><h3>Latest Transactions</h3></table>
  </div>
</div>

Table's output: enter image description here

As you can see the tables not places side by side. I am not sure what I did wrong. How could I fix this issue?

With valuable advices it seems working but now table's height is pretty small. Done changes: <div class="col-md-10"> added, width removed: This works but now tables height is not symmetric and long enough.

<div class="container" id="coverpage">
  <div class="row">
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">     
     <table id="tableblock" class="display"><caption><h3 style="color:black;">Latest Blocks</h3></caption></table>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
     <table id="tabletxs"   class="display"><caption><h3 style="color:black;">Latest Transactions</h3></caption></table>
  </div>
  </div>
</div>

Output:

enter image description here

Solution

  • This is how you do it the Bootstrap way. It will show the tables side by side on middle to big screens and below each other on small screens.

    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container" id="coverpage">
  <div class="row">
    <div class="col-md-6 col-sm-12">
       <table id="tableblock" class="table">
         <caption>Latest Blocks</caption>
         <tr><td>cell</td></tr>
       </table>
     </div>
     <div class="col-md-6 col-sm-12">
       <table id="tabletxs" class="table">
         <caption>Latest Transactions</caption>
         <tr><td>cell</td></tr>
       </table>
     </div>
  </div>
</div>