Как я могу плавать две таблицы рядом друг с другом слева направо?

Если у меня было две таблицы?

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

И CSS выглядит так:

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

Он не работает...

Ответ 1

Не используйте положение: относительное, просто укажите ширину для каждой таблицы, чтобы плавать правильно.

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

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

Ответ 2

Попробуйте дать им ширину. 40% каждый должен быть хорошим испытанием.

Ответ 3

Вы можете просто определить float: left для своего класса таблицы, он автоматически появится рядом друг с другом:

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>

Ответ 4

Что значит, что он не работает?

У CSS, который у вас есть, будет помещена одна таблица с каждой стороны родительского элемента. Если вы ищете, чтобы они плавали прямо друг против друга, а не на противоположных сторонах родителя, вам нужно "float: left;" в обоих из них (или наоборот "float: right" в обоих из них).

Ответ 5

Эй, это работает, я даю вам живое демо, теперь проверьте это.

и теперь вы можете сделать что-то вроде двух, как будто это

Вариант 1

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>