Dopasowywanie kolumny tabeli Bootstrap do zawartości

Używam Bootstrap i rysuję tabelę. W kolumnie po prawej stronie znajduje się przycisk i chcę, aby opadała do minimalnego rozmiaru, który musi zmieścić wspomniany przycisk.Dopasowywanie kolumny tabeli Bootstrap do zawartości

<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>

Powoduje to, podobnie jak to:

Table Example

W niektórych Firebug podkreślić, szerokość kolumna wyjdzie w tym szeroki:

Column Width

Ta kolumna jest skalowana ze stroną, a strona jest w trybach o większej dynamicznej szerokości. Mam pewne pojęcie o tym, jak to naprawić w czystym CSS, ale większość tych podejść prawdopodobnie spowoduje problemy z wersjami witryny o niskiej szerokości.

Jak ustawić tę kolumnę w dół do szerokości jej zawartości?

(Jak zawsze - istniejących klas bootstrap> czystym CSS> JavaScript)

Źródło

2015-07-02 Octopoid

Po pisał to, właśnie miałem myśl - gdybym tylko prawo wyrównać tę kolumnę, chyba że chodzi o to samo - jeśli pozostałe kolumny mają w nich wystarczająco dużo danych, aby potrzebują przestrzeni, będą cofnij to i tak. EDYCJA: Doh - to nie działa, gdy mam więcej niż jedną kolumnę muszę upuścić do minimalnej wielkości. – Octopoid

To prawda dla układu, ale tabele są absolutnie w porządku dla danych tabelarycznych. – Octopoid

Powinieneś używać div zamiast tabel. Następnie można przypisać wartości procentowe dla ich szerokości, aby dopasować szerokość strony. – sqe

Dodać do klasy, który będzie pasował szerokość komórki tabeli do zawartości

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

Źródło

2015-07-02 12:09:07 tmg

Gah - Powiedziałbym to w regule 'td', a następnie zastosowałem ją do' th' - która działa idealnie, dzięki. :) (Mam nadzieję, że nie przeszkadza mi, dodałem też do twojej odpowiedzi zasadę) – Octopoid

Kind starej pytanie, ale ja przybyłem tutaj szukając tego. Chciałem, aby stół był jak najmniejszy, dopasowany do jego zawartości. Rozwiązaniem było po prostu ustawienie szerokości stołu na dowolnie małą liczbę (na przykład 1px). I nawet stworzył klasę CSS go obsłużyć:

.table-fit { 
    width: 1px; 
}

i używać go tak:

<table class="table table-fit">

Przykład: JSFiddle

Źródło

2017-04-09 01:00:53

Pytanie dotyczy tylko niektórych kolumn tabeli, a nie wszystkich kolumn tabeli – GabiM

Tak, ale potrzebuję znaleźć rozwiązanie mój problem, przybyłem tutaj. Wyjaśniłem to w mojej odpowiedzi. –

Można owinąć stół wokół znacznika div tak jak to pomógł mi też.

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

<table> 
</table> 

</div>

Źródło

2017-07-30 10:10:17

Dopasowywanie kolumny tabeli Bootstrap do zawartości

Odpowiedz

Powiązane problemy