html - Scrollbar i tabel - problemer med højden - Udvikleren.dk

Tags: html css

Bruger #6080 @ 22.11.06 23:04

Hej kolge hoveder,

Jeg bruger en kode til at lave scrollbar i en tabel celle.
Men når jeg ikke har angivet en højde på cellen kommer den ikke frem, siden bliver bare længere i stedet.

Her er koden med indhold til C/P hvis i vil se hvad jeg mener:

Kode

<!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" lang="da" xml:lang="da">

<head>

<title>PHP-Freaks...</title>

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />

<style type="text/css">

body, html{
	height:99%;
}

table{
	height:100%;
}

td, th, textarea, body, table{
	font-family	: Verdana, Tahoma, Helvetica, sans-serif;
	font-size	: 12px;
	font-color	: #FFFFFF;
}

</style>

</head>

<body bgcolor="#050E1F">

<table border="0" id="test" width="100%" cellspacing="1" cellpadding="0">

<tr>
<td style="border: solid 1px #354C7C;" height="60" colspan="3" bgcolor="#16274C">
<img src="billeder/banner.gif" alt="PHP-Freaks" />
</td>
</tr>
<tr>
<td height="8" colspan="3">
<span style="font-size:3pt">
 
</span>
</td>
</tr>

<tr>
<td style="border: solid 1px #354C7C;" width="150" bgcolor="#16274C" valign="top">
menu<br />
</td>

<td width="8">
 
</td>

<td style="border: solid 1px #354C7C;" bgcolor="#16274C" valign="top">
<div style="width:100%;height:100%;overflow-y:auto;">
indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, indhold, 
				
</div>
</td>
</tr>

</table>

</body>

</html>

Og en udgave uden indhold for bare at se koden:

Kode

<!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" lang="da" xml:lang="da">

<head>

<title>PHP-Freaks...</title>

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />

<style type="text/css">

body, html{
	height:99%;
}

table{
	height:100%;
}

td, th, textarea, body, table{
	font-family	: Verdana, Tahoma, Helvetica, sans-serif;
	font-size	: 12px;
	font-color	: #FFFFFF;
}

</style>

</head>

<body bgcolor="#050E1F">

<table border="0" id="test" width="100%" cellspacing="1" cellpadding="0">

<tr>
<td style="border: solid 1px #354C7C;" height="60" colspan="3" bgcolor="#16274C">
<img src="billeder/banner.gif" alt="PHP-Freaks" />
</td>
</tr>

<tr>
<td height="8" colspan="3">
<span style="font-size:3pt">
 
</span>
</td>
</tr>

<tr>
<td style="border: solid 1px #354C7C;" width="150" bgcolor="#16274C" valign="top">
menu<br />
</td>

<td width="8">
 
</td>

<td style="border: solid 1px #354C7C;" bgcolor="#16274C" valign="top">
<div style="width:100%;height:100%;overflow-y:auto;">
indhold		
</div>
</td>
</tr>

</table>

</body>

</html>

Mit spørgsmål til jeg er så, hvordan klare jeg mit problem?
Siden må ikke blive højere end 100% af browseren.

M.v.h. og på forhånd tak.
Johnny Rasmussen.

1 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 5 karma

Sorter efter stemmer Sorter efter dato

Bruger #4907 @ 23.11.06 01:29

Dine problemer har selvfølgelig noget at gøre med, hvordan højden på tabelceller og alm. block-elementer beregnes, det kan du finde en masse hyggelæsning omkring i CSS-specifikationen. Suffice it to say, hvis du fx anvender et div-element i stedet for en tabel, vil du kunne få din scrollbar frem.

Ikke desto mindre kender jeg ikke nogen god måde at lave dit design på, eftersom du bl.a. har en tabelcelle ovenover med en fast højde. Du kan vel hente viewportens højde vha. JS, trække højden på tabellen ovenover fra, og ditto med diverse margins osv., og så sætte 'indholds'-boksen til den resterende højde -- men kønt er det jo ikke. I det hele taget er 100% højde ofte noget juks at rode med, det bliver først noget nemmere når CSS3 engang er både færdig og implementeret... Men indtil da (og det vil være ret lang tid) vil jeg nok egentlig bare anbefale dig at anvende et andet layout, fx acceptere at siden kan blive højere end viewporten... :-/

Scrollbar i tabel - problemer med højden

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler