Чому таблиці Bootstrap у Twitter завжди мають 100% ширину?

Припустимо, ця розмітка:

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

Немає значення, скільки клітинок у мене є, таблиця завжди на 100% шириною. Чому це?

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

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

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

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

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

<table style="width: auto;" ...працює чудово. Тестовано в Chrome 38, IE 11 та Firefox 34.

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

Якщо ви використовуєте Bootstrap 4, використовуйте .w-auto.

Дивіться https://getbootstrap.com/docs/4.1/utilities/sizing/

Відповідь №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/

У мене була така ж проблема, я зробив таблицю виправленою, а потім вказав свою ширину td. Якщо у вас є, ви можете зробити і це.

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

<td width="10%" /td>

Мені не пощастило з .table-nonfluid.

Я спробував додати style="width: auto !important"і працює для мене чудово!