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

Question

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

Heh, would that be because there are many ways to do it or due to my nubiness? :| — Elias7, Apr 23 '12 at 04:13
For whatever reason, people are extremely passionate about HTML tables. http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html — McGarnagle, Apr 23 '12 at 04:15

score 22 · Accepted Answer · answered Apr 23 '12 at 04:11

22

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;
}

answered Apr 23 '12 at 04:11

irfanmcsd

6,533
7
38
53

score 3 · Answer 2 · edited Jul 06 '17 at 15:05

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>

score 2 · Answer 3 · answered Apr 23 '12 at 04:10

2

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

answered Apr 23 '12 at 04:10

Ryan Potter

835
1
11
25

score 1 · Answer 4 · edited Jul 06 '17 at 14:37

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>

score -1 · Answer 5 · answered Apr 23 '12 at 04:15

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).

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

5 Answers5