How to display multiple html tables in 2 columns

Question

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?

score 1 · Answer 1 · answered Jul 21 '17 at 10:23

1

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.

answered Jul 21 '17 at 10:23

Rex

658
4
10

Isn't possible to do whatever the css framework does with jQuery? – vkoukou Jul 21 '17 at 10:35
JQuery does not replace css framework, rather it works with css. – Rex Jul 21 '17 at 10:50

score 1 · Answer 2 · answered Jul 21 '17 at 11:25

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 table 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>

score 1 · Accepted Answer · answered Jul 21 '17 at 12:59

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.

score 1 · Answer 4 · answered Sep 14 '18 at 10:22

#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

score 0 · Answer 5 · answered Jul 21 '17 at 10:25

0

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.

answered Jul 21 '17 at 10:25

N.Malloul

223
2
14

I added a very simple html structure to give you an idea of what my html looks like. – vkoukou Jul 21 '17 at 10:35
So you want to create the tables dynamically on clicking on button for examaple? And then add it to a div? – N.Malloul Jul 21 '17 at 10:37
I am creating them dynamically with jQuery every x minutes. So every time I add them to a div, which I empty and re-fill in the next interval. I just want to change the display structure of the tables(initially just view them side by side and after trying to do some more advanced stuff like auto-resizing and if the browser window becomes smaller than a width then display them again in 1 column). – vkoukou Jul 21 '17 at 10:40

score 0 · Answer 6 · answered Jul 21 '17 at 10:48

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>

score 0 · Answer 7 · answered Jul 21 '17 at 13:14

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>

How to display multiple html tables in 2 columns

7 Answers7