webForumDet fria alternativet

100% table height innuti cell?

1 svar · 375 visningar · startad av FredrikMH

FredrikMHMedlem sedan maj 200447 inlägg
#1

Jag är medveten om alla problem som förekommer med tabeller men jag har har en tabell som ser ut som följande:

--------------
| k1 | k2 | k3|
--------------
| k1 | k2 | k3|
--------------
| k1 | k2 | k3|
--------------

Där kx är kolumner (alltså 3x3 som exemplet ovan visar).
Innuti k3 vill jag har all information ordnat i toppen alltså valign="top". Men jag vill också ha en länk i botten av kolumnen och här har jag försökt med allt möjligt utan resultat. Det lättaste trodde jag var att lägga ytterligare en tabell med height="100%" och med 2 rader men det fungerar inte. Jag har även provat använda css för att flytta ner den informationen som ska vara i botten men då skiljer det för mycket på Firefox och IE.

Jag trodde jag kunde lösa det mesta i html men tydligen inte.

jarvkloMedlem sedan juli 20013 295 inlägg
#2

Hmm...

Tyvärr är det svårt att göra inuti en cell (om du inte t.ex. ställer in en fast höjd på cellen först)
Orsaken ligger i att defaultvärdet för en cells/rads/tabells höjd sätts till värdet "auto" och är en lång historia...

MEN

Du skulle kunna trixa lite med en extra tabellrad och rowspan t.ex. såhär:

<!DOCTYPE html 
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Ett av Jarvklos exempel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<table border="1" >
<!-- "rad 1" består av två tr-element -->
<tr valign="top">
	<td rowspan="2">Ett <br/>Ett <br/>Ett <br/>Ett <br/>Ett <br/></td>
	<td rowspan="2">Två</td>

	<td>Tre <br/>Tre</td>
</tr>
<tr><td valign="bottom">Bottenlänk</td></tr>

<!-- "rad 2" består av två tr-element -->
<tr valign="top">
	<td rowspan="2">Ett</td>
	<td rowspan="2">Två</td>

	<td>Tre <br/>Tre <br/> Tre <br/> Tre <br/> Tre <br/></td>
</tr>
<tr><td valign="bottom">Bottenlänk</td></tr>

<!-- och likaså rad 3 -->
<tr valign="top">
	<td rowspan="2">Ett</td>
	<td rowspan="2">Två</td>

	<td>Tre</td>
</tr>
<tr><td valign="bottom">Bottenlänk</td></tr>

</table>
</body>
</html>

Testa: http://member.webforum.nu/2241/3x3tabell-med-bottenlankar.html

Hoppas det funkar tillsammans med det du vill åstadkomma också ;)

Notera att exemplet även blir hyfsat bra ur tillgänglighetssynpunkt i just det här fallet (dvs när det bara är tredje kolumnen som skall ha en "bottenlänk") iom att den "serialiserar" bra (läs innehållet ur källkoden så hamnar "bottenlänk" där de skall i uppläsningen - dvs i anslutning till innehållet i tredjecellen på raden ovanför ;) )

Genererad på 378 ms · cache AV · v20260730165559-full.f96bc7eb