A Link über komplette TD Tabellenzelle?

CaptNick

Mitglied
Code:
 <style type="text/css">
 td {background-color:grey;
	 width:100px;
 	height:50px;	
	text-align:right;}
	
tr {vertical-align:bottom;}	

a {width:100px;
 	height:50px;
	display:block;}
	
 </style> 
 
<body>
<table style="width:500;">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><a href="#">Login</a></td>
    <td>Register</td>
    <td>FAQ</td>
  </tr>
</table>

</body>

Mit o.g. Code habe ich folgendes Problem dass die Schrift vom Link nicht mehr auf dem boden unten rechts ausgerichtet ist, kann man das Problem irgendwie umgehen? Es sollte weiterhin die komplette Tabellenzelle als Link nutzbar sein. JS ist auch keine alternative falls dieses nicht aktiviert ist.
 
Mit o.g. Code habe ich folgendes Problem dass die Schrift vom Link nicht mehr auf dem boden unten rechts ausgerichtet ist, kann man das Problem irgendwie umgehen?

Indem der Link Tabellenzellen-Eigenschaft erhält, und sein Elementinhalt unten ausgerichtet wird:
CSS:
a {width:100px;
    height:50px;
    display:table-cell;
    vertical-align:bottom;}
 
Zuletzt bearbeitet:
Gut das klappt, jedoch habe ich jetzt noch das Problem das die untere Zeile nach unten länger wird im vergleich zu den anderen wenn man noch ein padding einfügt

CSS:
td {background-color:grey;
	 width:100px;
 	height:50px;	
	text-align:right;
	padding-bottom:5px;
	padding-right:2px;}
 
Gut das klappt, jedoch habe ich jetzt noch das Problem das die untere Zeile nach unten länger wird im vergleich zu den anderen wenn man noch ein padding einfügt
Gemäß Berechnung von Breite und Höhe im CSS-Boxmodell müssen hier die padding-Werte von width und height subtrahiert werden, damit das Gesamtmaß von 100px*50px erhalten bleibt - also:

CSS:
td {background-color:gray; /* Der Farbname wird mit "a" geschrieben */
     width:98px;
    height:45px;    
    text-align:right;
    padding-bottom:5px;
    padding-right:2px;}

Zum Farbnamen siehe VGA-Farbpalette (16 Farben) mit Farbnamen.
 
Zuletzt bearbeitet:
Hi,
Gemäß Berechnung von Breite und Höhe im CSS-Boxmodell müssen hier die padding-Werte von width und height subtrahiert werden, damit das Gesamtmaß von 100px*50px erhalten bleibt

Oder man verwendet das CSS3 Box-Sizing-Modell.

Grüße
... oder eben so ;-)

CSS:
 td {background-color:gray;
     box-sizing:padding-box;
     width:100px;
     height:50px;    
     text-align:right;
     padding-bottom:5px;
     padding-right:2px;}
 
Zurück