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

148

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

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

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

twitter-bootstrap Skowron линии
источник
3
потому что он эффективно использует ширину своих родителей; именно так должна работать сеточная система!
Вишал
Какую ширину вы хотите, чтобы ваш стол был?
Андрес Ильич
1
Я хотел бы, чтобы он зависел от количества ячеек, как и в обычном столе
skowron-line
1
Для тех, кто ищет, как установить ширину ячейки, например, ширину div через span, проверьте этот ответ
alexche8

Ответы:

228

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

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

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

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

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

Андрес Ильич
источник
1
Если вы поместите таблицу в тег span *, чтобы центрировать таблицу, вы бы тоже включили смещение *?
HPWD
@dlackey Да, вы можете сместить таблицу классом для центрирования, вы даже можете добавить .span*класс к своей таблице, чтобы придать ей некоторую ширину.
Андрес Ильич
2
По крайней мере, с начальной загрузкой 3 у меня это сработало только после добавления !importantвwidth: auto
geekQ
мы должны использовать класс диапазона bootstarp за столом, или мы должны вручную дать стиль для .span класса,
Jot Dhaliwal
1
Предупреждение. Будьте осторожны при использовании в сочетании с .table-отзывчивым и .table-border. Граница применяется к .table-отзывчивому контейнеру, когда ширина экрана ниже 767 пикселей. (начальная загрузка 3.x)
Стюарт
13

Ответ № 1:

Зачем бороться с этим? Почему бы просто не контролировать ширину стола с помощью сетки начальной загрузки? Это Bootstrap 3 разметка.

<div class="row">
    <div class="col-sm-6">
        <table></table>
    </div>
</div>

Это создаст таблицу, которая составляет половину (6 из 12) ширины содержащего элемента.

Я иногда использую встроенные стили согласно другим ответам, но это не рекомендуется.

Ответ № 2:

Если вы используете bootstrap 4, у него есть несколько хороших вспомогательных классов для ширины, таких как:

w-25, w-50, w-75, and w-100

Вот документация: https://getbootstrap.com/docs/4.0/utilities/sizing/

Джесс
источник
2
это, безусловно, самое простое решение, и оно должно быть принятым ответом
Джефф Браун
12

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

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

<td width="10%" /td>

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

DDDD
источник
1
Попробуйтеwidth: auto !important;
Лев
Вы можете избежать !important(это плохая практика ). Смотрите комментарий к ответу ниже .
Олли Беннетт
3

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

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