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

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

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

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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

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

<td width="10%" /td>

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

Ответ 4

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