Zum Inhalt springen

Scrollbar in Tabellenzelle

Erstellt am 27. April 2006 · 9 Antworten · letzte Antwort am 28. April 2006

Tags: HTML & CSS, Frage

Schippi ·

Hallo!

Ich probiere nun schon seit langer Zeit, in eine Tabellenzelle eine Scrollbar zu bringen! Ist dies überhaupt möglich und wie kann es funktionieren?

Hier mal die html datei

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

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--###DOKUMENT### start -->
<table width="950" height="588" border="0" align="center" cellpadding="0" cellspacing="1" class="body">
  <tr>
    <td width="45" height="3">  </td>
    <td width="860" height="3"> </td>
    <td width="45" height="3"> </td>
  </tr>
  <tr>
    <td width="45" height="546"> </td>
    <td width="860" height="546" bordercolor="#000000" class="mitte"><table width="860" height="543" border="0" cellpadding="0" cellspacing="1">
        <tr> 
          <td width="90" height="60">###LOGO###</td>
          <td width="770" height="60"> </td>
        </tr>
        <tr> 
          <td width="90" height="483" class="menu">###MENULINKS###</font></td>
          <td width="770" height="483" class="text">
            <!--###INHALT### start -->
            <!--###INHALT### stop -->
          </td>
        </tr>
      </table></td>
    <td width="45" height="546"> </td>
  </tr>
  <tr>
    <td width="45" height="3"> </td>
    <td width="860" height="3"> </td>
    <td width="45" height="3">  </td>
  </tr>
</table>
<!--###DOKUMENT### stop -->
</body>
</html>

nun möchte ich in die Zelle vom Inhalt eine Scrollbar einbauen, da die Seite nur eine gewisse größe haben soll. wie kann ich das machen? danke im voraus!

miwolfram ·
just2b schrieb

mit einem div und css => overflow: auto;

ohne div gehts auch.
overflow kann man auch direkt auf Tabellenzellen - also tds - anwenden.

Schippi ·
miwolfram schrieb
just2b schrieb

mit einem div und css => overflow: auto;

ohne div gehts auch.
overflow kann man auch direkt auf Tabellenzellen - also tds - anwenden.

Ich hab jetzt das overflow eingefügt und auf scroll gesetzt. funktioniert trotzdem nicht.

<table width="860" height="543" border="0" cellpadding="0" cellspacing="1">
        <tr> 
          <td width="90" height="60">###LOGO###</td>
          <td width="770" height="60"> </td>
        </tr>
        <tr> 
          <td width="90" height="483" class="menu">###MENULINKS###</font></td>
          <td width="770" height="483" class="text" overflow="scroll"> 
            <!--###INHALT### start -->
            <!--###INHALT### stop -->
          </td>
        </tr>
      </table>

Ich weiß nicht mehr, was ich machen soll.

miwolfram ·

das ist natürlich eine CSS-Anweisung!!!

Du musst - wenn dus schon direkt ins HTML schreibst - schreiben:
style="overflow:auto;"

Ansonsten geht das mit Sicherheit nicht.
Ich empfehle dir dort mal CSS nachzulesen (zum Beispiel overflow):
http://www.css4you.de/overflow.html

Übrigens: Wenn du overflow:auto statt overflow:scroll benutzt werden die Scrollbalken nur angezeigt wenn sie nötig sind.

Schippi ·
miwolfram schrieb

das ist natürlich eine CSS-Anweisung!!!

Du musst - wenn dus schon direkt ins HTML schreibst - schreiben:
style="overflow:auto;"

Ansonsten geht das mit Sicherheit nicht.
Ich empfehle dir dort mal CSS nachzulesen (zum Beispiel overflow):
http://www.css4you.de/overflow.html

Übrigens: Wenn du overflow:auto statt overflow:scroll benutzt werden die Scrollbalken nur angezeigt wenn sie nötig sind.

Ich hab es jetzt reingeschrieben, aber trotzdem funktioniert es nicht. er macht mir immer noch die zelle groß. die zelle sieht so aus.

          <td width="770" height="483" class="text" style="overflow:auto;"> 		  
            <!--###INHALT### start -->
            <!--###INHALT### stop -->	 
          </td>

dreh gleich durch!

miwolfram ·

Du musst das bei allen Tabellenzellen dieser Zeile machen!

die Tabellenzellen beeinflussen sich gegenseitig!
Jede Zelle ist so groß wie die größte Zelle in der Tabellenzeile.

Ausserdem würde ich Breite und Höhe auch in CSS verpacken (kann sein dass das auch dazwischenpfuscht):
style="width: 770px;height: 483px;overflow:auto;"
natürlich musst du die Größenanweisungen per HTML entfernen.

Schippi ·

Hab jetzt alles gemacht, aber es will nicht. wenn in der Zelle mehr drinnen steht, wird sie größer!

Hier die komplete datei:

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

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--###DOKUMENT### start -->
<table width="950" height="533" border="0" align="center" cellpadding="0" cellspacing="1" class="body">
  <tr>
    <td width="45" height="3">&nbsp; </td>
    <td width="860" height="3">&nbsp;</td>
    <td width="45" height="3">&nbsp;</td>
  </tr>
  <tr>
    <td width="500" height="489">&nbsp;</td>
    <td width="500" height="489" bordercolor="#000000" class="mitte"><table width="860" height="489" border="0" cellpadding="0" cellspacing="1">
        <tr> 
          <td width="90" height="60">###LOGO###</td>
          <td width="770" height="60">&nbsp;</td>
        </tr>
        <tr> 
          <td class="menu" style="width:90px; height:426; overflow:auto;">###MENULINKS###</font></td>
          <td class="text" style="width:770px; height:426; overflow:auto;"> 		  
            <!--###INHALT### start -->
            <!--###INHALT### stop -->	 
          </td>
        </tr>
      </table></td>
    <td width="500" height="489">&nbsp;</td>
  </tr>
  <tr>
    <td width="45" height="3">&nbsp;</td>
    <td width="860" height="3">&nbsp;</td>
    <td width="45" height="3">&nbsp; </td>
  </tr>
</table>
<!--###DOKUMENT### stop -->
</body>
</html>
miwolfram ·

Ok ich habs jetzt mal ausprobiert.

Erstaunlicherweise funktioniert das wirklich nicht ohne Probleme wie es eigentlich sollte.

Damit es (im Firefox) funktioniert muss der Style so gesetzt werden:
style="display:block;height:400px;overflow:auto;"

Wieso es nur als "display:block;" funktioniert ist mir ein Rätsel.

Im IE hast du damit jedoch Pech - egal ob er sich im Quirksmode oder im StandardsMode (also wenn Doctype richtig gesetzt ist) befindet - er lässt sich einfach nicht dazu bewegen da einen Scrollbalken anzuzeigen.

Naja - hilft nix. Mach dein Design wie just2b vorgeschlagen hat - mit Divs dann funktionierts 100%ig.
Ist sowieso schöner und leichter.

Gute Website hierzu:
www.css4you.de

Schippi ·
miwolfram schrieb

Ok ich habs jetzt mal ausprobiert.

Erstaunlicherweise funktioniert das wirklich nicht ohne Probleme wie es eigentlich sollte.

Damit es (im Firefox) funktioniert muss der Style so gesetzt werden:
style="display:block;height:400px;overflow:auto;"

Wieso es nur als "display:block;" funktioniert ist mir ein Rätsel.

Im IE hast du damit jedoch Pech - egal ob er sich im Quirksmode oder im StandardsMode (also wenn Doctype richtig gesetzt ist) befindet - er lässt sich einfach nicht dazu bewegen da einen Scrollbalken anzuzeigen.

Naja - hilft nix. Mach dein Design wie just2b vorgeschlagen hat - mit Divs dann funktionierts 100%ig.
Ist sowieso schöner und leichter.

Gute Website hierzu:
www.css4you.de

Danke für deine Bemühungen!