Как разместить несколько таблиц в DIV во всю его ширину?

Question

[w00w]

Добрый день.
Посредством php include в тело основной страницы подгружаю файлы. 1 файл = одна таблица. (файлов может быть как 1 так ~).
Как без задания ширины в таблице, размазать их равномерно по всей ширине дива?
То есть например если будет 1 файл то таблица из него займет всю ширину, если 2 то по 50% и т.д..

Answer 1

[Александр Суханов]

.container {
display:table;
width:100%;
}
.container .block {
display:table-cell;
border: 1px solid #000;
}

<div class="container">
    <div class="block">
Текст
    </div>
    <div class="block">
Текст
    </div>
</div>

Соотв. 1 подключенный файл должен добавлять 1 запись:
<div class="block">Текст</div>
А вообще, что то не понятно, как это, таблица из файла...

Comments

[w00w]

Есть php файлы назовем их модулями, каждый их них выводит какую-то информацию:
Например:

<table cellpadding=0 cellspacing=0 border=0 align=left>
    <tr>
        <th><h3>Name1</h3></th>
   </tr>
  <tr>
        <td>1111111 <br> (<b>2222</b> / <b>3333</b>)</td>
	</tr>
</table>

Их я гружу includ'ом, получается несколько таких табличек выстроенными в горизонтальную линию.
Но дело в том что ширина этих таблиц ужимается до содержания такста в них и таблицы прижимаются к левой части.
Например зная что будет таких файлов например 4, я могу прописать width:25% и они разделят 100% страницы на 4 равные части. Если 5 файлов то width:20% соответственно 5 частей.
Но т.к не зная сколько их будет например завтра, хочется сделать авто-сайз. То есть сколько бы их нибыло они делили длину на равные значения.

[Александр Суханов]

Попробуйте так:

<style>
.container {
  display: flex;
  flex-direction: row;
}
.container .block {
  flex: 1;
  border: 1px solid #000;
}
</style>

<div class="container">
Сюда вставляем таблицы
</div>

Таблицу обрамляем дивом block, убираем align=left, добавляем width="100%"

<div class="block">
<table cellpadding="0 "cellspacing="0" border="0" width="100%">
    <tr>
        <th><h3>Name1</h3></th>
   </tr>
  <tr>
        <td>1111111 <br> (<b>2222</b> / <b>3333</b>)</td>
  </tr>
</table>
</div>

https://codepen.io/atuin/pen/aQvbdw
------------
Еще один вариант, это в PHP поставить счетчик на кол-во таблиц и добавить туда стиль:

<style>
table {
width: calc(100%/N);
}
</style>

Где N - количество таблиц.

[w00w]

Спасибо большое! https://codepen.io/anon/pen/ZmbYYv то что нужно!
С счетчиком интересный вариант - почитаю!