Загрузочный лоток: лист жидкости слишком широкий для окна

Я работаю над проектом, используя twitter bootstrap. У нас есть таблица с большим количеством столбцов, и она будет больше, чем окно браузера почти каждый раз.

Это то, что происходит справа:

Граница таблицы остается в окне браузера, а содержимое таблицы - нет. Если я прокручиваю, границы остаются там, где они есть, они не "следуют" в окне браузера.

Вы можете увидеть проблему в этом 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