Mat: Tabellen gestalten Link über ganze Zelle

Beitrag lesen

Hallo allerseits!

Mir stellt sich gerade folgendes Problem:
Ich will einen Link in einer Tabelle erstellen

  • die in ihren Zellen ein Padding (von 5px) verwendet
  • der eine komplette Tabellenzelle ausfüllt
  • nicht am linken Rand der Zelle klebt
  • linksbündig (nicht zentriert) dargestellt wird
  • und dabei kein JavaScript verwenden.

Im Code habe ich meine bisherigen Überlegungen zum Thema hinterlegt.
Link 1 füllt aufgrund des Paddings nicht die ganze Zelle aus,
Link 2 fehlt was in der Höhe und er klebt am linken Rand,
Link 3 klebt am linken Rand, füllt aber immerhin die ganze Zelle aus,
Link 4 schießt am rechten Rand über das Ziel hinaus, klebt aber nicht mehr am linken Rand.

Perfekt wäre also ein Link, der die Zelle ausfüllt wie Link 3 und an der Stelle von Link 4 erscheint. Ich hoffe mein Problem ist damit klar. Über jegliche Hilfe würde ich mich freuen!

Beste Grüße
Mat

  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">  
<head>  
	<title>Table test</title>  
	<style type="text/css">  
		table  
		{	width: 100%;	}  
		td  
		{	padding: 5px;  
			border: 1px solid black;	}  
		.td_link  
		{	padding: 0px;	}  
		td a  
		{	color: black;  
			display: block;  
			margin: 0px;  
			height: 100%;  
			width: 100%;	}  
		td a:hover  
		{	color: white;  
			background-color: black;	}  
		.padding  
		{	padding: 5px 0px 5px 0px;	}  
		.padding_zuviel  
		{	padding: 5px 0px 5px 5px;	}  
	</style>  
</head>  
<body>  
	<table>  
		<tr>  
			<td>inhalt</td>  
			<td>  
				<a href="test.htm">test</a>  
			</td>  
			<td>inhalt</td>  
		</tr>  
		<tr>  
			<td>inhalt</td>  
			<td class="td_link">  
				<a href="test.htm">zelle ohne padding</a>  
			</td>  
			<td>inhalt</td>  
		</tr>  
		<tr>  
			<td>inhalt</td>  
			<td class="td_link">  
				<a href="test.htm" class="padding">link mit padding</a>  
			</td>  
			<td>inhalt</td>  
		</tr>  
		<tr>  
			<td>inhalt</td>  
			<td class="td_link">  
				<a href="test.htm" class="padding_zuviel">zuviel padding</a>  
			</td>  
			<td>inhalt</td>  
		</tr>  
	</table>  
</body>  
</html>