Używam Bootstrap i rysuję tabelę. Kolumna znajdująca się najbardziej po prawej stronie ma przycisk i chcę, aby opadał do minimalnego rozmiaru potrzebnego do dopasowania do tego przycisku.
<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>
To renderuje się tak:
Po podświetleniu firebug szerokość kolumny wyszła tak szeroka:
Ta kolumna skaluje się wraz ze stroną, podczas gdy strona znajduje się w większych dynamicznych trybach szerokości. Mam pewne wyobrażenie, jak bym to naprawić w czystym CSS, ale większość z tych podejść prawdopodobnie spowoduje problemy z wersjami witryny o małej szerokości.
Jak sprawić, by ta kolumna była rozwijana do szerokości jej zawartości?
(Jak zawsze - istniejące klasy bootstrap> czysty CSS> JavaScript)