Kod tack!
Frågan#1
jag lyckas inte få texten i en tabell att börja i toppen och gå neråt. har provat skriva valign-top men det funkar inte
text i tabell
9 svar · 618 visningar · startad av rozie
i din <td> kör du valign="top" eller kör du css och då kör du blir det ex.
<style type="text/css">
td.top {vertical-align:top;}
</style>
sen <td class="top">
jag gjorde för nåt år sedan detta exempel.
Du ser säkert hur det funkar.
<html>
<head>
<style type="text/css">
<!--
table { width:100%; height:100%; border:red 2px solid; }
td { border: 2px solid; color:blue;}
.text1 { border: 2px solid; text-align:right; vertical-align:text-top;}
.text2 { border: 2px solid; text-align:justify; }
.text3 { border: 2px solid; text-align:center; vertical-align:text-middle;}
.text4 { border: 2px solid; vertical-align:text-top;}
.text5 { border: 2px solid; vertical-align:text-bottom;}
.text6 { border: 2px solid; text-align:right; vertical-align:text-middle;}
-->
</style>
</head>
<body bgcolor=lightblue>
<table bgcolor=lightgreen cellpadding="0" cellspacing="0">
<tr>
<td class="text1">Högerställd text, högst uppe</td>
<td class="text2">Vänsterställd text, vertikalt centrerad</td>
</tr><tr>
<td class="text3">Texten centrerad vertikalt o horizontellt</td>
<td class="text4">Texten högst upp, vänsterställd</td>
</tr><tr>
<td class="text5">Texten nertill, vänsterställd</td>
<td class="text6">Texten högerställd, vertikalt centrerad</td>
</tr>
</table>
</body>
</html>
bossse skrev:
jag gjorde för nåt år sedan detta exempel.
Du ser säkert hur det funkar.
I Firebird kommer .text5 längst upp till vänster, vilket inte är meningen. :(
sub, super, text-top, text-bottom
These values do not apply to cells; the cell is aligned at the baseline instead.
http://www.w3.org/TR/REC-CSS2/tables.html#height-layout
Jag ändrade en del i bosses exempel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; background-color: #ccc;}
td { width: 100px; height: 100px; border: 1px solid #000;}
.text1 { text-align: right; vertical-align: top;}
.text2 { text-align: left; vertical-align: middle;}
.text3 { text-align: center; vertical-align: middle;}
.text4 { text-align: left; vertical-align: top;}
.text5 { text-align: left; vertical-align: bottom;}
.text6 { text-align: right; vertical-align: middle;}
</style>
</head>
<body>
<table>
<tr>
<td class="text1">Högerställd text, högst uppe</td>
<td class="text2">Vänsterställd text, vertikalt centrerad</td>
</tr>
<tr>
<td class="text3">Texten centrerad vertikalt o horizontellt</td>
<td class="text4">Texten högst upp, vänsterställd</td>
</tr>
<tr>
<td class="text5">Texten nertill, vänsterställd</td>
<td class="text6">Texten högerställd, vertikalt centrerad</td>
</tr>
</table>
</body>
</html>
Fast denna ändring med fasta mått på td funkar ej om man anger bredd och höjd på tabellen.
Funkar dock om man BARA anger höjd på td.
td { width: 100px; height: 100px; border: 1px solid #000;}
Oavsett om man använder pixel eller procent för tabellstorlek.
Texten kommer inte rätt då!
Man kanske vill ha en tabell som täcker större delen av skärmen.
Egentligen så är det ju raden (tr) som har en höjd, kolumnen (td) får ju automatisk den höjden enl. nedan.
Så därför har jag moddat exemplet lite till .
<style type="text/css">
table {width: 100%; height:90%; border-collapse: collapse; background-color: #ccc;}
tr {height:100px;}
td {border: 1px solid #000;}
.text1 { text-align: right; vertical-align: top;}
.text2 { text-align: left; vertical-align: middle;}
.text3 { text-align: center; vertical-align: middle;}
.text4 { text-align: left; vertical-align: top;}
.text5 { text-align: left; vertical-align: bottom;}
.text6 { text-align: right; vertical-align: middle;}
</style>
tackar nu funkar det!
men jag dök på ett nytt problem... i tabellen lägger jag inte text som är valign-top och align-justify. problemet är att lägger jag in för mycket text så justerar tabellen sig och blir större... finns det nåt sätt man kan låsa måtten på?
behöver ni kodexempel?
Om du anger en fast bredd för tabellen/kolumnen/cellen kommer texten inte att ändra på bredden, såvida ett enskilt ord inte är bredare än tabellens/kolumnens/cellens bredd. Om du skoningslöst vill klippa ord som är längre än vad de får vara kan du skriva så här:
<table style="table-layout: fixed; width: 100px;">
<tr>
<td style="overflow: hidden">Ett superdupermegaenormtjättelångt ord</td>
</tr>
</table>
Annars kan du välja att visa en scrollist, då innehållet inte får plats:
<table style="width: 100px;">
<tr>
<td><div style="overflow: auto">Ett superdupermegaenormtjättelångt ord</div></td>
</tr>
</table>