Почему таблицы 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)

— Стюарт

31

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

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

— Разан Пол
источник

15

Если вы используете Bootstrap 4, используйте .w-auto.

См. Https://getbootstrap.com/docs/4.1/utilities/sizing/.

— Данко Дурбич
источник

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;правило.

— Олли Беннетт

Не совсем ответ, лучше отредактировать текущий принятый ответ, который читают большинство людей (я редактировал его сейчас) .

— Юлиан Онофрей