Daniel N.: Scrollbare Tabellen-Zelle

Beitrag lesen

SELF-Forum

Scrollbare Tabellen-Zelle

Daniel N.
– Informationen zu den Bewertungsregeln

Hallo,

Ich möchte eine so Tabelle formatieren, dass eine (ausgezeichnete) Zelle scrollbar wird, sobald ihr Inhalt nicht mehr in diese Zelle passt. Diese Tabellen-Zelle soll dabei die gesamte ihr noch zur Verfügung stehende Höhe einnehmen.

Folgende Skizze verdeutlicht (hoffentlich) mein Vorhaben:

+------------------------------------+
|                                    |
+------------------------------------+
|                                  |^|
|                                  | |
|                                  | |
|                                  | |
|                                  | |
|                                  | |
|                                  | |
|                                  |v|
+------------------------------------+
|                                    |
+------------------------------------+

Mein Versuche haben bisher folgendes ergeben:

  
<?xml version="1.0" encoding="ISO-8859-1"?>  
  
<!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" id="top">  
  
<head>  
<title>Table-Test 100% Höhe</title>  
  
<style type="text/css">  
  
 html, body, form {  
  margin:0;  
  padding:0;  
 }  
  
 html, body {  
  height:100%;  
  overflow: hidden;  
 }  
  
 table {  
  height:100%;  
  width:100%;  
  border:3px solid green;  
 }  
  
 td.content {  
  vertical-align:top;  
  height:inherit;  
 }  
  
 td.header {  
  height: 33px;  
  background-color: olive;  
 }  
  
 td.footer {  
  height: 33px;  
  background-color: olive;  
 }  
  
 </style>  
  
</head>  
  
  
<body>  
  
<table>  
 <tr>  
  <td class="header">Header</td>  
 </tr>  
 <tr>  
  <td class="content">  
  
  <div style="height:100%; overflow: auto;">  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  <p>Test</p>  
  </div>  
  </td>  
 </tr>  
 <tr>  
  <td class="footer">Header</td>  
 </tr>  
</table>  
  
  
</body>  
</html>

Ich habe verschiedene Ansätze versucht, leider bisher ohne Erfolg.
Folgender (alter) Thread hat dieses Problem bereits einmal diskutiert, meiner Meinung nach ohne richtig funktionierendes Gesamtergebnis.

Ich würde mich über Ideen und Hinweise von euch sehr freuen!

P.S.:
Das ganze soll übrigens kein "Seitenlayout" werden und ich kenne weiß auch, dass <table> zur Auzeichnung von tabellarischen Daten ist. Also bitte keine solche Diskussion in diesem Thread, dass sehe ich genauso. ;-)

Beitrag melden
–
Informationen zu den Bewertungsregeln