CODEWITHSUNDEEP
htmlcss
Elias7
Elias7

Reputation: 12901

How can I float two tables next to each other left to right?

If I had two tables?

<table class="one"> and... <table class="two">

And the CSS looks like:

table.one {
    position: relative;
    float: left;
}
table.two {
    position: relative;
    float: right;
}

It is not working...

Upvotes: 14

Views: 94134

Answers (5)

Shailender Arora
Shailender Arora

Reputation: 7788

You can simply define float: left to your table class it will come automatically next to each other:

table {
    float:left;
    background:yellow;
    margin-left:10px;
}
<table>
    <tr>
        <td>Table 1</td>
    </tr>
    <tr>
        <td>blah blah</td>
        <td>blah blah</td>
        <td>blah blah</td>
    </tr>

</table>

<table>
    <tr>
        <td>Table 2</td>
    </tr>
    <tr>
        <td>blah blah</td>
        <td>blah blah</td>
        <td>blah blah</td>
    </tr>
</table>

Upvotes: 4

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Hey it working i give you live demo now check this

and now you can do thing two option as like this

Option one

table.one {
  position:relative;
  float:left;
  border:solid 1px green;
}

table.two {
  position:relative;
  float:right;
  border:solid 1px red;
}
<table class="one">
  <tr>
    <td>hello demo here</td>
  </tr>
</table>

<table class="two">
  <tr>
    <td>hello demo here 2</td>
  </tr>
</table>

Option two 

<table class="one" align="left" border="1">
  <tr>
    <td>hello demo here</td>
  </tr>
</table>

<table class="two" align="right" border="1">
  <tr>
    <td>hello demo here 2</td>
  </tr>
</table>

Upvotes: 1

arychj
arychj

Reputation: 711

What do you mean it's not working?

The CSS that you have will put one table on each side of the parent element. If you're looking for them to be float directly against each other rather than on opposite sides of the parent you'll want 'float: left;' in both of them (or conversely 'float: right;' in both of them).

Upvotes: -1

irfanmcsd
irfanmcsd

Reputation: 6571

Don't use position:relative, just provide width for each table in order to float properly.

table.one {
    float:left;
    width:45%;
}

table.two   {
    width:45%;
    float:right;
}​

Upvotes: 22

Ryan Potter
Ryan Potter

Reputation: 845

Try giving them a width as well. 40% each should be a good test.

Upvotes: 2

Related Questions