Загрузочный лоток: лист жидкости слишком широкий для окна
Я работаю над проектом, используя twitter bootstrap. У нас есть таблица с большим количеством столбцов, и она будет больше, чем окно браузера почти каждый раз.
Это то, что происходит справа:
![The Problem]()
Граница таблицы остается в окне браузера, а содержимое таблицы - нет. Если я прокручиваю, границы остаются там, где они есть, они не "следуют" в окне браузера.
Вы можете увидеть проблему в этом jsfiddle. Он работает на Safari, а не на Chrome или Firefox.
Макет выглядит следующим образом:
<body>
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span1'>
... menusidebar here...
</div>
<div class='span11'>
<table class="table table-striped table-bordered" style="white-space: nowrap">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Надеюсь, ты поможешь мне. Если вам нужна дополнительная информация, просто спросите, я буду рад предоставить.
Это приложение Rails 3.2, использующее gem bootstrap-sass в версии 2.2.1.1 (проблема также появляется в 2.2.2.0). Первые три номера отражают версию начальной загрузки.
Ответы
Ответ 1
Бутстрап имеет следующий стиль, применяемый к таблицам:
table {
max-width: 100%;
}
Если вы переопределите это свойство в своей пользовательской таблице стилей, он, надеюсь, решит проблему. Изменение его на "none" должно работать.
table {
max-width: none;
}
Ответ 2
Это было единственное решение, которое сработало для меня...
.table {
max-width: none;
table-layout: fixed;
word-wrap: break-word;
}
Ответ 3
Если вы находитесь в Bootstrap 3, другой подход заключается в том, чтобы обернуть таблицу в
<div class="table-responsive"><table>...</table></div>
Это делает таблицу отзывчивой.
Ответ 4
Вы можете применить стиль = "переполнение: авто;" для установки горизонтальной полосы прокрутки за столом. Таким образом, дизайн будет по-прежнему оставаться отзывчивым. Следуйте за кодом:
.table-scrollable{
overflow: auto;
}
И используйте его в своем div:
<div class='span11 table-scrollable'>
Ответ 5
Применение стиля = "overflow: auto;" работал отлично для меня
Ответ 6
Я нашел решение где-то в Интернете...
table {table-layout:fixed}
Он решает проблемы в Firefox и IE, с загрузкой 2 и 3