Bardo Bardo - 1 month ago 7
CSS Question

Make all buttons on a td show into same line while keeping it shrunk

I'm using tables to represent tabular data from my app listings.

On each row, on the first cell, I draw several buttons to allow users to activate de record (edit, delete, enter into de detail view, etc...).

Number of buttons on the td can vary, but they will be the same on every table row.

So I'd like that my first column fits exactly to the number of buttons that are shown on the table.

I'm applying a class 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.

Example html of a table

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


So... let's say that depending on the table I'm showing and the permissions the user in session has, I can show a different number of buttons. I'd like all the buttons to place in a single line, I can do this just giving a fixed width to my buttonsBlock class, however, I'd also like this td to fit to the lesser space possible.

Just now, depending on the space occupied by data on tds from A to E and the number of buttons, all buttons show on a single line or, sometimes, the last button drops to a new line.

Any ideas?

Answer

Try adding white-space: nowrap to the table cell that holds the buttons:

.buttonsBlock {
    white-space: nowrap;
}

Demo here: http://jsfiddle.net/5sMm8/

(Also, I'm not sure why you have an anchor wrapping a button.)

Comments