Jak stworzyć element “wystający” z komórki tabeli

Wyobraźmy sobie, że mamy potrzebę wstawienia do komórki tabeli pewnej treści, która:

1) ma się znaleźć dokładnie w miejscu, gdzie znajduje się interesując nas komórka tabeli
2) nie powinna rozciągać komórki w której się znajduje
3) jednocześnie powinna być widoczna w całości bez zawijania tekstu.

Potrzeba ta nie została wymyślona “z kosmosu”, ale wynikła w faktycznej realizacji pewnego zadania. Jednym z rozwiązań mogłoby być pozycjonowanie za pomocą Javascript elementu <div>, tak aby znalazł się w wskazanym miejscu – ale to dosyć karkołomne. Da się to zrobić za pomocą styli, i to całkiem prosto jak się okazuje:

<table cellspacing="0">
<tr><th>ID</th><th>Nazwa</th><th>Ilość</th><th>Status</th></tr>
<tr>
	<td>1</td>
	<td>Lorem ipsum<br><br>
	<div style="position:absolute;"><div style="position:relative;top:-1em;"><span>Edytuj | Usuń | Ukryj | Przelicz | Rezerwuj | Zwolnij</span>
	</div></div>
	</td>
	<td>50 sztuk</td><td>Dostępny</td>
</tr>
</table>

table

Przedstawiony powyżej efekt można by oczywiście osiągnąć za pomocą dodatkowego wiersza tabeli i rowspan/colspan – jednak, w wspomnianym przypadku, nie było to zalecane, ze względu użycie funkcjonalności drag&drop na wierszach tabeli. :)

Dla porządku cały kod źródłowy przykładowej strony:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
	table {
		width:350px;
		border:1px solid #000000;
		font-size:12px;
	}
 
	th {
		padding:5px;
		background:#777;
		color:#ffffff;
		text-align:left;
	}
 
	td {
		vertical-align:top;
		border-bottom:1px solid #000;
		padding:5px;
	}
 
	span {
		font-size:10px;
		color:#0033bb;
	}
</style>
</head>
<body>
 
<table cellspacing="0">
<tr><th>ID</th><th>Nazwa</th><th>Ilość</th><th>Status</th></tr>
<tr>
	<td>1</td>
	<td>Lorem ipsum<br><br>
	<div style="position:absolute;"><div style="position:relative;top:-1em;"><span>Edytuj | Usuń | Ukryj | Przelicz | Rezerwuj | Zwolnij</span>
	</div></div>
	</td>
	<td>50 sztuk</td><td>Dostępny</td>
</tr>
<tr>
	<td>2</td>
	<td>Doloret Sit Amet<br><br>
	<div style="position:absolute;"><div style="position:relative;top:-1em;"><span>Edytuj | Usuń | Ukryj | Przelicz | Rezerwuj | Zwolnij</span>
	</td>
	<td>25 sztuk</td>
	<td>Zarezerwowany</td>
</tr>
</table>
 
</body>
</html>