Как расположить 3 отдельных таблицы горизонтально?

Question

[Антон]

Приветствую, подскажите как расположить 3 отдельных таблицы горизонтально, задаю width 33.3333%, float left, но все равно не помогает, помогите как правильно составить.

Answer 1

[Алексей Ярков]

https://jsfiddle.net/yarkov_aleksei/d1o0y8fq/

<table>
  <tr>
    <td>1</td>
  </tr>
</table>
<table>
  <tr>
    <td>2</td>
  </tr>
</table>
<table>
  <tr>
    <td>3</td>
  </tr>
</table>

table {
  width: 33.3%;
  border: 1px solid black;
  float: left;
}

Comments

[Антон]

Спасибо, а можно ли задать чтобы например в мобильной версии таблицы не сжимались а отображались уже вертикально?

[Neyury]

Антон: можно, использую медиа-запросы https://webref.ru/css/value/media

[Антон]

Neyury: спасибо,

@media screen and (max-width: 600px) {
     table { float: none; }

Answer 2

[Максим]

https://jsfiddle.net/qfgc9wnt/ вот так , но причём здесь php?

Comments

[Антон]

Спасибо за помощь, php и вправду тут лишнее

Answer 3

[Максим Васильев]

• flexbox: flex-base: 30%
  
• boostrap.css: container/row/col-*-4
  
• bootstrap4.css: container/row/col-*
  
• завернуть в три inline-box с width: 33%;
  
• засунуть в другую таблицу
  

что именно не получается?

Comments

[Антон]

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

[Максим]

Антон: не используй таблицы , но всё же если требуется это то в медиа запросе пишешь float:none; clear:left;

[Антон]

Максим Жаров: а что лучше использовать??

[Максим Васильев]

v4-alpha.getbootstrap.com/layout/grid/#example-res...
или media-query с width (min-width для flex)

[Максим]

Антон: блочная вёрстка , флекс ,