Почему таблицы Twitter Bootstrap всегда имеют ширину 100%?

116

Предположим, что эта разметка:

<table class="table table-bordered" align="center">

Нет, сколько ячеек у меня есть, таблица всегда равна 100%. Почему так?

  • 3
    потому что он эффективно использует ширину своих родителей; именно так должна работать сеточная система!
  • 0
    Какую ширину вы хотите, чтобы ваш стол был?
Показать ещё 2 комментария
Теги:

4 ответа

195
Лучший ответ

Все таблицы в загрузочном лотке растягиваются в соответствии с их контейнером, что вы можете легко сделать, разместив таблицу в элементе сетки .span* по вашему выбору. Если вы хотите удалить это свойство, вы можете создать свой собственный класс таблицы и просто добавить его в таблицу, которую хотите развернуть, с содержимым внутри:

.table-nonfluid {
   width: auto !important;
}

Вы можете добавить этот класс в свою собственную таблицу стилей и просто добавить его в контейнер своей таблицы так:

<table class="table table-nonfluid"> ... </table>

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

Поделиться
  • 1
    Если вы поместите таблицу внутри тега span *, чтобы центрировать таблицу, вы бы тоже включили смещение *?
  • 0
    @dlackey Да, вы можете .span* классом для .span* , вы даже можете добавить класс .span* к вашей таблице, чтобы придать ей некоторую ширину.
Показать ещё 3 комментария
21

<table style="width: auto;" ... работает отлично. Протестировано в Chrome 38, IE 11 и Firefox 34.

jsfiddle: http://jsfiddle.net/rpaul/taqodr8o/

Поделиться
9

У меня была такая же проблема, я сделал таблицу фиксированной, а затем указала мою ширину td. Если у вас есть, вы тоже можете это сделать.

<style>
table {
table-layout: fixed;
word-wrap: break-word;
}
</style>

<td width="10%" /td>

Мне не повезло с .table-nonfluid.

Поделиться
  • 3
    +1 <th style = "width: 5%;"> Title </ th> помог мне
  • 1
    Попробуйте width: auto !important;
Показать ещё 1 комментарий
2

Я попытался добавить style="width: auto !important" и отлично работает для меня!

Поделиться
  • 1
    Если вы гарантируете, что ваш собственный CSS появится после Bootstrap CSS (например, ваш тег пользовательских стилей <link> появится ниже тега Bootstrap <link> ), то правила будут каскадно соответствовать назначенному, и вам не нужно будет использовать ваш !important исключение на всех. Это правда, потому что width: 100%; определено для table в Bootstrap CSS и поэтому заменяет вашу width: auto; править.
  • 0
    Не совсем ответ, лучше отредактировать текущий принятый ответ, который читают большинство людей (я редактировал его сейчас) .

Ещё вопросы

Сообщество Overcoder
Наверх
Меню