Как сделать, чтобы контент (таблица) вылезал за границы div-контейнера?

Question

[vkoshelev_01]

Шаблон использует bootstrap 4. Проблема в том, что контент контейнера - таблица вылезает за границы и растягивает его.


Сам контент помещен в:

<div style="overflow-x: auto; min-height: 0.01%;"></div>

Т.е. по идее, контент не должен вылезать за границу, но в итоге, это не срабатывает. Пробовал разные подходы, ко всем , которые стоят перед таблицей, пробовал ставить стиль того же, что выше,но безуспешно.

owerflow: hidden
Так же не помогло. Если удаляю таблицу - сразу весь макет приходит в порядок.

В css очень плох, гугление не помогло. Прошу помощи. Спасибо!

Answer 1

[Сергей Герасимов]

Поместите вашу таблицу в div с классом table-responsive:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Comments

[vkoshelev_01]

Пробовал. Но попробовал еще раз - без толку.

[Сергей Герасимов]

vkoshelev_01, у вас что-то переопределяет этот класс, видите стили перечеркнуты, сделайте скрин правого окошка ниже.

[vkoshelev_01]

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

[Сергей Герасимов]

vkoshelev_01, у вас выше ещё один div с overflow-x: auto.

[vkoshelev_01]

Сергей Герасимов, да не, безрезультатно. Вплоть до того, что удалил все лишние div-ы из .card-body

[vkoshelev_01]

Вообще, думаю, что где-то таблица виновата. Поведение следующее: вот так выглядит таблица без данных, но если включить получение данных, то она начинает отображаться правильно. Хотя структура не меняется, всего лишь добавляются строки в tbody. Из-за чего может быть - не представляю.

[Сергей Герасимов]

vkoshelev_01, No data это у вас часть таблицы?