overflow: auto bei Dynamischem td

M

MaxivB

Hallo,
ich habe hier eine Tabelle, die über das genze dokument gehen soll, wenn der inhalt in den td's zu groß wird soll eine Scrollleiste an der Seite erscheinen, leider ignoriert der browser das bei Prozentualen werten :(
Wie erreiche ich es, dass es trotzdem klappt?
HTML: 
<table style="width: 100%; height: 100%">
	<tr>
		<td style="height: 50%; overflow: auto;">
			test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />test
		</td>
	</tr>
	<tr>
		<td style="height: 50%; overflow: auto;">
			test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />test
		</td>
	</tr>
</table>

Danke im Voraus
 
Gut, dann sieht das ja so aus, oder:
Code: 
<table style="width: 100%; height: 100%">
	<tr>
		<td style="height: 50%;">
			<div style="width: 100%; height: 100%; overflow : auto;">
				test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />test
			</div>
		</td>
	</tr>
	<tr>
		<td style="height: 50%;">
			<div style="width: 100%; height: 100%; overflow : auto;">
				test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />test
			</div>
		</td>
	</tr>
</table>
Passieren tut aber nicht wirklich was....
 
Das liegt an der height:100%-Deklaration für die DIV-Blöcke.

Hier passiert bedeutend mehr, wie in deinem Tabellengerüst :)
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-05-04">

<title>tutorials.de | demo_MaxivB</title>

<style type="text/css">
<!--
* { margin:0; padding:0; }
html,body { overflow:hidden; }
html,body,#wrapper { height:100%; }
.scrollBox { height:50%; overflow:auto; }
-->
</style>

</head>
<body>

<div id="wrapper">
     <div class="scrollBox">
          test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
     </div>
     <div class="scrollBox">
          test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
     </div>
</div>

</body>
</html>


mfg Maik
 
Aber wenn ich die beiden boxen wieder in eine Tabelle rein tuh, klappt es wieder nicht:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-05-04">

<title>tutorials.de | demo_MaxivB</title>

<style type="text/css">
<!--
* { margin:0; padding:0; }
html,body { overflow:hidden; }
html,body,#wrapper,#table { height:100%; }
.scrollBox { height:50%; overflow:auto; }
-->
</style>

</head>
<body>
<table id="table">
	<tr>
		<td>
			<div id="wrapper">
   					<div class="scrollBox">
    						test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
    				</div>
   				<div class="scrollBox">
    					test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
    				</div>
			</div>
		</td>
	</tr>
</table>
</body>
</html>
 
Laß mal die Tabelle weg - ohne Grund hab ich sie in meinem Beispiel nicht rausgeschmissen.

mfg Maik
 
Ok, danke.....

Dann ändere ich halt alle Tabellen auf divs...

//edit
Es geht aber nicht ander, da an der seite noch eine Navisgationsbar seien soll...
 
Zuletzt bearbeitet von einem Moderator:
Ja und? Ist dies nicht ohne Tabellen realisierbar?

Wie dein scrollfähiges Tabellenkonstrukt von den Browsern "angenommen" wird, siehst du ja.

mfg Maik
 
Ich hab das dann mit margin und position: absolute gemacht, das finde ich aber "unschön", weil wenn ein Text größer wird der Nav-Div einfach über die Scrolls geht...
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-05-04">

<title>tutorials.de | demo_MaxivB</title>

<style type="text/css">
<!--
* { margin:0; padding:0; }
html,body { overflow:hidden; }
html,body,#wrapper,#table { height:100%; }
.scrollBox { height:50%; overflow:auto; margin-left: 200px;}
#navbar {height:100%; overflow: auto; position: absolute; left: 0px; top: 25px; background-color: #666666; width: 200px;}
-->
</style>

</head>
<body>
<div id="navbar">
text<br />
text<br />
</div>
<div id="wrapper">
	<div style="height: 25px; background-color: #CCCCCC;"></div>
   	<div class="scrollBox">
    		test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
    	</div>
   	<div class="scrollBox">
    		test<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test
    	</div>
</div>
</table>
</body>
</html>
 
CSS: 
#navbar { overflow: auto; position: absolute; left: 0px; top: 25px; bottom: 0; background-color: #666666; width: 200px;}

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück