Всем привет!

Все веб-программисты сталкиваются с табличным представлением данных — это частый элемент панелей администрирования, всевозможных списков и т.п.

Очень часто необходимо, помимо данных, вывести сервисные ссылки — удаление, редактирование, статистика. И тут начинается — вывод слева, вывод справа… Кто на что горазд. Сам я использовал как тот, так и другой способы. Все бы ничего — но в условиях жесткого ограничения на размер блока, куда выводится таблица, хочется видеть чем больше информации, тем лучше. Вот тут и встал вопрос — а куда девать панель сервисных кнопок?

Ответ родился такой — можно снизу, в другую строку.

<table>
	<tr>
		<!-- Строка с данными #1 -->
	</tr>
	<tr>
		<!-- Строка с меню для данных #1 -->
	</tr>
	...
	<tr>
		<!-- Строка с данными #n -->
	</tr>
	<tr>
		<!-- Строка с меню для данных #n -->
	</tr>
</table>

Реализация

Под строкой с данными, скажем, в 4 ячейки, идет новая строка с одной, объединенной ячейкой. В этой ячейке находится элемент DIV, у которого свойство position установлено в relative. Внутри него, находится еще один DIV, но с position:absolute. Последний DIV — это и есть наша панель, которая находится в зависимости от позиционирования либо слева, либо справа.

<tr>
	<td>1</td>
	<td>
		<a href="#details/8">
			<i class="icon-table"></i> Анализ АИС
		</a>
	</td>
	<td>
		<i class="icon-calendar"></i> 13/02/12, вы
	</td>
	<td>всем</td>
</tr>

<tr>
	<td class="toolpbar-holder" colspan="4">
		<div class="with-toolbar">
			<div class="row-toolbar big-icons">
				<a href="#edit/8" title="Редактировать анкету «Анализ АИС»">
					<i class="icon-edit"></i>
				</a>
				<a href="#delete/8" title="Удалить анкету «Анализ АИС»">
					<i class="icon-trash"></i>
				</a>
				<a href="#results/8" title="Результаты анкеты «Анализ АИС»">
					<i class="icon-list-alt"></i>
				</a>
			</div>
		</div>
	</td>
</tr>

Сам стиль:

.with-toolbar{
	position: relative;
	text-align: right;
	font-size: 11px!important;
	margin: 0!important;
	padding: 0 2px!important; }

	.with-toolbar > div.row-toolbar{
		background: none repeat scroll 0 0 #FFFFFF;
		border: 1px solid #CCCCCC;
		border-radius: 7px 7px 7px 7px;
		box-shadow: 1px 2px 5px rgba(6, 6, 6, 0.69);
		padding: 2px;
		bottom: 10px;
		position: absolute;
		right: 5px;
		display: none; }

td.toolpbar-holder {
	padding:0!important;}

	tr:hover + tr td .with-toolbar > div.row-toolbar,
	div.row-toolbar:hover{
		display: block;}

	.row-toolbar.big-icons{
		font-size: 22px; }

		.row-toolbar.big-icons a {
			display: inline-block;
			margin:0 3px;}

		.row-toolbar.big-icons a + a{
			margin-left: 5px;}

Как это работает.

Когда мы наводим указатель на строку, срабатывает правило tr:hover + tr td .with-toolbar > div.row-toolbar и нижняя строка становится видна. Когда мы наводим указатель на сервисную панель, тогда срабатывает правило div.row-toolbar:hover. Остальные правила — просто украшательства.

Рабочий пример использует Bootstrap CSS для оформления, и в элементах ссылок. Я не великой знаток CSS, так что возможно можно сделать проще. Но я сделал пока что так. Смотреть — тут.