Tabellenheader bleibt oben (fixed)

Jakob

Jakob

Aktives Mitglied
Thread Starter
Dabei seit
05.01.2004
Beiträge
1.070
Reaktionspunkte
21
Hallo,

ich habe hier eine Tabelle, die Kategorien Name, Telefonnummer usw. hat. Gibt es eine Möglichkeit den Tabellenheader oben stehen zu lassen auch wenn man nach unten scrollt, ähnlich wie Mail oder iTunes? Ich weiß vorher nicht, wie breit die einzelnen Spalten sind.

Wenn ich im CSS thead { position: fixed } angebe, bleibt es zwar oben, aber der Inhalt erweitert die Kopfzellen nicht, d.h. diese sind viel zu klein.

Danke!
 
Ehm, link?
 
nur einen bestimmten teil einer tabelle zu scrollen, könnte schwierig sein. du
kannst unter die kopfzeile nen div-container mit overflow:auto und fester größe
setzten, und in diesen div-container eine weitere tabelle.
 
HTML: 
<html>
<head>
<style type="text/css">
thead {
  background: #ff0;
  position: fixed;
}
tbody {
  background: #0f0;
}
tfoot {
  background: #f00;
}
</style>
</head>
<body>
<table>
  <thead>
   <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
   </tr>
  </thead>
  <tfoot>
   <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
   </tr>
  </tfoot>  
  <tbody>
   <tr>
     <td>1234567890</td>
     <td>2</td>
     <td>3</td>
     <td>4</td>
     <td>5</td>
     <td>6</td>
   </tr>  
  </tbody>
</table>
</body>
</html>

Komisch. Stimmt. Wenn man den <thead> festnagelt, klebt er zwar oben, aber passt sich nicht mehr an die Breite der darunter liegenden Tabelle an. Ich vermute, dafür gibt es keine Lösung, wenn du ohne feste Breiten der Zellen arbeitest/arbeiten musst.

Matt
 
HTML: 
<html>
<head>
</head>
<body>

<table border="0" cellpadding="0" cellspacing="0" width="500">
 <tr>
  <td width="30%">name:</td>
  <td width="40%">adresse:</td>
  <td width="30%">mail:</td>
 </tr> 
  
 <tr>
  <td colspan="3">
   <div style="width:100%;height:70px;overflow:auto;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
     <tr>
      <td width="31%">1</td>
      <td width="41%">2</td>
      <td width="*">3</td>
     </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
     </tr>     
     <tr>
      <td>1234567890</td>
      <td>2</td>
      <td>3</td>
     </tr> 
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
     </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
     </tr>     
     <tr>
      <td>1234567890</td>
      <td>2</td>
      <td>3</td>
     </tr> 
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
     </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
     </tr>     
     <tr>
      <td>1234567890</td>
      <td>2</td>
      <td>3</td>
     </tr>      
    </table>
   </div>
  </td>
 </tr>
</table>
</body>
</html>
 
Das geht (wenn man mal davon absieht, das es ein häßliches Konstrukt ist ;-). Weil du die Breite der Zellen angibst. Jakob schreibt aber, das er die Breite nicht weiß.

Matt
 
msslovi0 schrieb:
Das geht (wenn man mal davon absieht, das es ein häßliches Konstrukt ist ;-). Weil du die Breite der Zellen angibst. Jakob schreibt aber, das er die Breite nicht weiß.
Zum Vergrößern anklicken....

mist, hast recht...das mit dem thead, tfoot und tbody hat bei mir (safari)allerdings auch nicht funktioniert !?!
 
Hallo,

ja schade scheint echt nicht zu gehen, jedenfalls nicht in meinem Fall.

Es gibt die Möglichkeit eine scrollbare Tabelle nur mit CSS zu erstellen, aber in meinem speziellen Fall kann ich das nicht benutzen, da ich den Scrollbalken vom Fenster zum Scrollen benutzen möchte und nicht einen weiteren für die Tabelle.

Danke für all Eure Versuche!
 
Hab gerade rausgefunden, dass wenn man nur die Links (meine Tabelle ist sortierbar) fixiert, sie an der richtigen Stelle bleiben:

thead a {
position:fixed;
}

Jetzt kann muss man nur dem thead eine Höhe geben, weil der sonst ja unter fehlendem content kollabiert und die Links mit display:block und ner Hintergrundfarbe füttern und man hätte sowas glaub ich.

Ich verfolg das mal.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten