ширина div не работает?

Question

У меня проблема с содержимым из div, например, если я помещу таблицу внутри div и установлю ширину (width:200px !important) для этого div, таблица перезапишет этот div.Так как можно сохранить весь контент внутри этого div?

Пример скрипты: http://jsfiddle.net/ebG9N/45/

Answer 1

Есть два решения.

i) Если вы хотите СТРОГО содержать таблицу WITHIN div, тогда переполнение: авто; - путь.

ii) НО, если вы передумали и хотите обернуть div шириной таблицы. Дисплей: таблица; - путь.

Обычно плохая идея содержать более широкий элемент в явно известном менее широком элементе.

Answer 2

Вы устанавливаете заголовок на white-space: nowrap;, поэтому браузер не может разбить заголовки, поэтому ширина таблицы будет больше, чем размер контейнера.

Вы можете установить, overflow: hidden;, чтобы вырезать переполненные части, или overflow: auto;, чтобы создать полосу прокрутки, но без них это правильный рендеринг.

Answer 3

Попробуйте использовать overflow:auto; в CSS для div.

Answer 4

Вы не можете просто ожидать, что он как-то уместится в div любого размера, который вы пожелаете. Что вы можете сделать, это, по крайней мере, позволить браузеру прокручивать (overflow: scroll), используя:

div.divano{
    width:200px !important;
    border:2px solid yellow;
    background:#eaeaea;
    height:200px;
    overflow: scroll;
}

Вы также можете использовать oveflow: hidden, но это будет просто скрывать части, которые не видны. Кроме того, overflow: scroll всегда будет отображать полосу прокрутки (с отсечкой или без нее). Вы можете использовать overflow: auto, чтобы указать, что содержимое следует прокручивать, только если происходит отсечение.