Tabell över hela sidan?

14 svar · 579 visningar · startad av harry_boy 10 aug. 2003

harry_boyMedlem sedan feb. 2003193 inlägg

Frågan10 aug. 2003 08:04#1

Jag undrar hur jag skriver för att få en tabell att bli över hela sidan på höjden. Den skall alltid vara så förrutom när jag har information som gör att sidan blir högre.
Helst vill ha koden i css-format!

Tack på förhand!

NoMasterMedlem sedan sep. 2002106 inlägg

10 aug. 2003 08:07#2

http://www.webforum.nu/showthread.php?forumid=12&threadid=46652&highlight=tabellh�jd

Eller om du inte orkar leta bland inläggen:

Variant1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Tabell 100%</title>
</head>
<body marginwidth="0" marginheight="0" style="height:100%; margin:0px;">
<div style="position:absolute; height:100%;">
<table width="100%" height="100%" border="1">
<tr>
<td>Hej hopp</td>
</tr>
</table>
</div>
</body>
</html>

Variant2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv" style="height:100%">
<head><title>test</title></head>
<body style="margin:0 0 0 0;height:100%">
<table width="100%" height="100%" border="1">
<tr>
<td>Hej hopp</td>
</tr>
</table>
</body>
</html>

bossseMedlem sedan juni 2003771 inlägg

10 aug. 2003 08:53#3

Variant 3. Med Css som du ju efterfrågade!

<html>
<head>

<style "text/css">
<!--
Body {background-color:lightgreen;margin:10px;font-size:16pt;color:yellow;} 
Table{background-color:blue;width:100%;height:100%;border:3 solid black;border-collapse:collapse;} 
Td {width:50%; height:50%; border:1 solid black;text-align:center;} 
-->
</style >
</head>
<body >
<table >
<tr>
<td>
Det var väl så här du menade <BR> 
att du vill ha det ?
</td>
<td>
Lite innehåll
</td>
</tr>
<tr>
<td >
Visas alltid lika i alla upplösningar <BR>
genom att använda procenttal
</td>
<td>
Ändra bara margin till det värd du vill <BR>
för att få tabellen större el mindre
</td>
</tr>
</table>
</body>
</html>

NoMasterMedlem sedan sep. 2002106 inlägg

10 aug. 2003 09:34#4

Jo, stilen kan man ju ändra hur man vill, värt att poängtera dock, är ju att det kan vara bra att använda rätt dtd om man vill ha korrekt kod.

jarvkloMedlem sedan juli 20013 378 inlägg

10 aug. 2003 11:55#5

Jupp - exempel på hur det kan bli annars finns t.ex. här: http://www.webforum.nu/showthread.php?s=&postid=650163#post650163

harry_boyMedlem sedan feb. 2003193 inlägg

11 aug. 2003 11:52#6

Jag har nu försökt att få till det men jag blir bara gråhårig. Vet inte vad jag gör eller skall göra för att det skall bli över hela sidan. Har jag byggt upp sidan på helt fel sätt eller???

Tack på förhand!

test.txt (3 kB)

SkarreMedlem sedan apr. 20012 427 inlägg

16 sep. 2003 18:20#7

NoMaster skrev:

Jo, stilen kan man ju ändra hur man vill, värt att poängtera dock, är ju att det kan vara bra att använda rätt dtd om man vill ha korrekt kod.

Ursäkta att jag drar upp en väldigt gammal tråd, men jag är nyfiken på om det existerar en metod att få en tabell att sträcka sig vertikalt över hela dokumentet om man vill hålla sig till korrekt "XHTML 1.0 Transitional". Jag märker att "height:100%;" inte biter när man kopplar dokumentet till rätt dtd.

JessiMedlem sedan aug. 200317 inlägg

17 sep. 2003 17:18#8

Jag undrar en sak.
Enligt W3C som jag använde för att validera min hemsida förut så ska man inte ange hight på tabeller, bara celler....
Likaså läste jag mig till det någonstans.
Stämmer inte det ???

Web-TorMedlem sedan nov. 200013 890 inlägg

17 sep. 2003 18:19#9

Jo, det bästa är att använda CSS för att ange höjd:

<table style="height: 100%;">

jarvkloMedlem sedan juli 20013 378 inlägg

17 sep. 2003 19:26#10

Med reservation för att ha missat någon detalj...;)

Skarre skrev:

jag är nyfiken på om det existerar en metod att få en tabell att sträcka sig vertikalt över hela dokumentet om man vill hålla sig till korrekt "XHTML 1.0 Transitional". Jag märker att "height:100%;" inte biter när man kopplar dokumentet till rätt dtd.

Hmm...
Jag antar att du testat kokbokslösningen (dvs ett derivat av tipsen ovan):

<style type="text/css">
<!--
body,html {height:100%; padding:0; margin:0}
table {height:100%; width:100%}
-->
</style>

[...]

<table><tr><td>100% hög</td></tr></table>

Om det är detta som inte funkar för dig:
Hur ser den kod du har problem med ut, och vilken/vilka webbläsare gäller det...

SkarreMedlem sedan apr. 20012 427 inlägg

22 sep. 2003 15:53#11

I IE funkar det naturligtvis eftersom den inte är speciellt petig. I Firebird sträcker sig visserligen tabellen längs hela dokumentet, men vill man t.ex. ha margin eller padding på bodyn så kajkar det ur eftersom detta läggs på utöver de 100%. Resultatet är rullingslister, så metoden ovan håller inte.

SkarreMedlem sedan apr. 20012 427 inlägg

22 sep. 2003 15:56#12

Jag bumpar det här inlägget eftersom jag råkade ut för ett databasfel som resulterade i att inlägget inte registrerades som senaste inlägg.

RED: Hoppsan, det hjälpte tydligen inte. Samma fel igen.

SkarreMedlem sedan apr. 20012 427 inlägg

23 sep. 2003 22:45#13

Nytt försök:

jarvkloMedlem sedan juli 20013 378 inlägg

24 sep. 2003 08:10#14

Alltså:
"Kokboksmetoden" fungerar - men bara under förutsättningen att man verkligen vill att tabellen skall täcka hela skärmytan och att man kan tänka sig att använda en "korrekt" <!DOCTYPE på sin sida
.
Testa gärna: http://member.webforum.nu/2241/helsidestabell.html

Skarre skrev:

vill man t.ex. ha margin eller padding på bodyn så kajkar det ur eftersom detta läggs på utöver de 100%. Resultatet är rullingslister, så metoden ovan håller inte.

Hmm...
Om man vill ha en margin eller padding på sidan (utanför tabellen alltså) så täcker ju inte tabellen hela skärmytan hur man än gör - dvs då efterfrågar man egentligen om en helt annan sak än det som tråden handlade om från början - eller hur? ;)

Sedan kan man också notera följande:

Kör man med en korrekt <!DOCTYPE så kajkar metoden alltid ur om man vill ha margin eller padding på body, även i MSIE ;) , se http://member.webforum.nu/2241/Skarres_tabell_standards_mode.html
Detta beror på hur bredder och höjder definieras i "boxmodellen" i CSS

Kör man däremot med en <!DOCTYPE som ger "quirks mode" så får man det beteendet som Skarre beskriver - se http://member.webforum.nu/2241/Skarres_tabell_quirks_mode.html

:birp

jarvkloMedlem sedan juli 20013 378 inlägg

24 sep. 2003 09:37#15

Oops - felpostad!
Sorry :r