CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-tabledisplay
vkoukou
vkoukou

Reputation: 142

How to display multiple html tables in 2 columns

I have an application running on jQuery which fetches some data and creates html tables by appending the newly created tables inside a div element.
The tables are displayed fine, but I would like them to appear next to each other so that the user can see them 2 by 2 and avoid scrolling up and down all the time.

Code Structure:

<div id=example>
 <table id=1>
  <tr>
   <td>..</td><td>..</td>
  </tr>
 <table>
 <table id=2>
  <tr>
   <td>..</td><td>..</td>
  </tr>
  more rows..
 <table>
</div>

Tables have dynamic number of rows and some rows have different number of cells.

The wanted outcome is:

table1 | table2
table3 | table4
table5 | table6
etc.

How can I do that either in html(when constructing the tables) or after with jQuery selectors and filters?

Upvotes: 0

Views: 4110

Answers (7)

Suraj Kumar
Suraj Kumar

Reputation: 11

Option I - Use Float CSS.
Example :

<div style="float: left;width: 49%;">
    <!--table 1-->
</div>
<div style="float: right;width: 49%;">
    <!--table 2-->
</div>

Option II - Put Your tables inside another table
Example:

<table>
    <tbody>
        <tr>
            <td>table 1</td>
            <td>table 2</td>
        </tr>
        <tr>
            <td>table 3</td>
            <td>table 4</td>
        </tr>
        <tr>
            <td>table 5</td>
            <td>table 6</td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Xaib Aslam
Xaib Aslam

Reputation: 113

#wrap {
   width:600px;
   margin:0 auto;
}
#left_col {
   float:left;
   width:300px;
}
#right_col {
   float:right;
   width:300px;
}
<div id="wrap">
    <div id="left_col">
        COL 1
    </div>
    <div id="right_col">
        COL 2
    </div>
</div>

Make sure that the sum of the colum-widths equals the wrap width. Alternatively you can use percentage values for the width as well.

For more info on basic layout techniques using CSS have a look at this tutorial

Upvotes: 1

Swarn Singh
Swarn Singh

Reputation: 134

Simple you can do it with css. Use css selector it will select all tables inside div and set them on width 50%. Use css like this:

<style>
    #example table{
        width: 50%;
    }
</style>

If this not works perfectly then add float left like this:

<style>
    #example table{
        float: left;
        width: 50%;
    }
</style>

Upvotes: 0

vkoukou
vkoukou

Reputation: 142

After trying different things, the easiest solution was to use Flexbox.

My solution was based on Jan Derk's answer from this post.

Since I only wanted 2 columns I used the float: left/right property on my tables: 

jQuery("table").each(function(index, value) {

    if(index%2===0){

        jQuery(this).css({"float": "center","width": "45%"});

    }else {

        jQuery(this).css({"float": "left","width": "45%"});

    }

});

and then on the surrounding Div element I assigned these CSS properties:

jQuery("#div_id").css({"display":"flex","flex-wrap":"wrap", "justify-content": "center"});

This solution is also responsive and resizes dynamically as you resize the window or use a mobile screen.

Upvotes: 1

Peter B
Peter B

Reputation: 24212

Since you are already creating tables, you might as well create nested tables. Of course you can style and align all this as your heart desires.

table       { border: solid 1px black }
table table { border: solid 1px red }
<table id=TMain>
  <tr>
    <td>
      <table id=T1a>
        <tr><td>..</td><td>..</td><td>..</td></tr>
      </table>
    </td>
    <td>
      <table id=T1b>
        <tr><td>..</td><td>..</td></tr>
        <tr><td>..</td><td>..</td></tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table id=T2a>
        <tr><td>..</td><td>..</td></tr>
        <tr><td>..</td><td>..</td></tr>
        <tr><td>..</td><td>..</td></tr>
      </table>
    </td>
    <td>
      <table id=T2b>
        <tr><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td><td>..</td></tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 1

N.Malloul
N.Malloul

Reputation: 223

Your can use Bootstrap to manage grid system, or css to do it. I can't take you an example because you haven't post your code.

Upvotes: 0

Rex
Rex

Reputation: 678

If you are using bootstrap, you could use their grid system: Bootstrap Grid System

If you don't, then you could do put your tables in a parent div whos width is 50%, then put two parent div in another div whos width is 100%. It could get messy because table's width and screen width etc.

I strongly suggest you use a css framework if you are not already using one.

Upvotes: 1

Related Questions