Как правильно вставить таблицу в блок?

Question

[CorbenDallass]

Использую twitter bootstrap, вёрстка примерно такая (классы бутстрапа - дефолтные):

<div class='panel'>
  <div class='panel-body'>
    <table class='table'>
      ...
    </table>
  </div>
</div>

Проблема в том, что panel привязывается к размеру окна, а текст из таблицы - нет. То есть при уменьшении окна браузера текст таблицы вылазит на границы panel.



Установка table-layout: fixed на таблицу и overflow: hidden на ячейки - не подходит, поскольку ширина колонок становится не самой удачно - выглядит некрасиво, много пространства впустую тратится. Абсолютное позиционирование panel (без других дополнений) тоже не устраивает - panel дожен быть как обычный panel - выровненным по середине.

В общем, хочется сделать, чтобы при первоначальном рендере страницы panel полностью охватывал таблицу, включая выпирающие надписи из ячеек, а при уменьшении ширины окна чтобы panel не сужался вместе с окном.

Answer 1

[Виталий Киренков]

Если я правильно понял, то вам нужно на страницу поставить минимальную ширину и всё...
body { min-width: 1000px;}

Comments

[CorbenDallass]

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

[Виталий Киренков]

Покажите дизайн, в противном случае просто непонятно о чём вообще речь...

[CorbenDallass]

@DeLaVega Вставил в пост.

[Виталий Киренков]

@CorbenDallass вы не туда копаете. У вас реально длинные слова в контенте. В самом широком варианте играйтесь с размером шрифта и отступами, либо же таблицу вставьте див, который будет с горизонтальным скроллом, если перебор.