Создание столбца таблицы Bootstrap, подходящего для содержимого

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<table class="table table-responsive"> 
 
     <tbody> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Payment Method</th> 
 
       <th></th> 
 
      </tr> 
 
      <tr> 
 
       <td>Bart Foo</td> 
 
       <td>Visa</td> 
 
       <td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td> 
 
      </tr> 
 
     </tbody> 
 
    </table>

Это делает так:

Table Example

с подсветкой некоторых поджигатель, ширина колонки вышла эта широка:

Column Width

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

Как я могу сделать эту колонку опущенной до ширины ее содержимого?

(Как всегда - Существующие бутстраповских классы> чистый CSS> Javascript)

источник

2015-07-02 Octopoid

После отправил это, я только что подумал - если бы я только право выровнять эту колонку, я предполагаю, что это примерно то же самое - если другие столбцы имеют достаточно данных, в них нужно пространство, они будут в любом случае, коготь. EDIT: Doh - это не работает, когда у меня есть более одного столбца, который мне нужно опуститься до минимального размера. – Octopoid

Thats true для макета, но таблицы абсолютно подходят для табличных данных. – Octopoid

Вы должны использовать divs вместо таблиц. Затем вы можете назначить процентные значения для их ширины в соответствии с шириной страницы. – sqe

сделать класс, который будет соответствовать ширине ячейки таблицы к содержанию

.table td.fit, 
.table th.fit { 
    white-space: nowrap; 
    width: 1%; 
}

источник

2015-07-02 12:09:07 tmg

Gah - Я бы поместил это в правило 'td', а затем применил его к' th' - это отлично работает, спасибо. :) (Надеюсь, вы не против, я тоже добавил правило th в ваш ответ) – Octopoid

Вид на старый вопрос, но я прибыл здесь ищут это. Я хотел, чтобы стол был как можно меньше, приспосабливаясь к его содержимому. Решением было просто установить ширину таблицы на произвольное небольшое число (например, 1px). Я даже создал класс CSS, чтобы справиться с этим:

.table-fit { 
    width: 1px; 
}

И использовать его так:

<table class="table table-fit">

Пример: JSFiddle

источник

2017-04-09 01:00:53

Вопрос заключается в том, чтобы указывать только на некоторые столбцы таблицы, а не на все столбцы таблицы – GabiM

Да, но нужно найти решение для моя проблема, я приехал сюда. Я объяснил это в своем ответе. –

Вы можете обернуть таблицу вокруг сНа тега, как это как это тоже помог мне.

<div class="col-md-3"> 

<table> 
</table> 

</div>

источник

2017-07-30 10:10:17

Создание столбца таблицы Bootstrap, подходящего для содержимого

ответ

Смежные вопросы