Я использую таблицы для представления табличных данных из списков моих приложений.
В каждой строке, в первой ячейке, я рисую несколько кнопок, чтобы пользователи могли активировать запись (редактировать, удалять, вводить подробный просмотр и т.д.).
Количество кнопок на td может меняться, но они будут одинаковыми для каждой строки таблицы.
Поэтому мне бы хотелось, чтобы мой первый столбец соответствовал числу кнопок, отображаемых в таблице.
Я применяю класс buttonsBlock {min-width: 1px; } to these cells, but on a certain table disposition (depending of the space occupied by the rest of the cells) some buttons fall to a second line, instead of being all together. } к этим ячейкам, но при определенном расположении таблицы (в зависимости от пространства, занимаемого остальными ячейками) некоторые кнопки попадают во вторую строку, а не все вместе.
Пример html таблицы
<table>
<tr>
<th></th>
<th>Field A</th>
<th>Field B</th>
<th>Field C</th>
<th>Field D</th>
<th>Field E</th>
</tr>
<tr>
<td class="buttonsBlock">
<a href="actionButton1Url">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</a>
<a href="actionButton2Url">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-file"></span>
</button>
</a>
<a href="actionButton3Url">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-th-list"></span>
</button>
</a>
</td>
<td>Data field A</td>
<td>Data field B</td>
<td>Data field C</td>
<td>Data field D</td>
<td>Data field E</td>
</tr>
</table>
Итак... скажем, что в зависимости от таблицы, которую я показываю, и разрешений, которые имеет пользователь в сеансе, я могу показать другое количество кнопок. Я бы хотел, чтобы все кнопки размещались в одной строке, я могу сделать это, просто задав фиксированную ширину для моего класса buttonBlock, однако мне также хотелось бы, чтобы этот td соответствовал меньшему возможному пространству.
Только сейчас, в зависимости от пространства, занимаемого данными по tds от A до E и количеством кнопок, все кнопки отображаются на одной строке или, иногда, последняя кнопка падает до новой строки.
Есть идеи?
Попробуйте добавить white-space: nowrap
к ячейке таблицы, которая содержит кнопки:
.buttonsBlock {
white-space: nowrap;
}
Демо здесь: http://jsfiddle.net/5sMm8/
(Кроме того, я не уверен, почему у вас есть привязка, завернутая на кнопку.)