Tabellenheader bleibt oben (fixed)

Diskutiere mit über: Tabellenheader bleibt oben (fixed) im Web Page Design Forum

  1. Jakob

    Jakob Thread Starter MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    Registriert seit:
    05.01.2004
    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!
     
  2. eSynth

    eSynth MacUser Mitglied

    Beiträge:
    491
    Zustimmungen:
    0
    Registriert seit:
    15.07.2005
    Ehm, link?
     
  3. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    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.
     
  4. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    Registriert seit:
    20.03.2005
    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
     
  5. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    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>
     
  6. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    Registriert seit:
    20.03.2005
    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
     
  7. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    mist, hast recht...das mit dem thead, tfoot und tbody hat bei mir (safari)allerdings auch nicht funktioniert !?!
     
  8. Jakob

    Jakob Thread Starter MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    Registriert seit:
    05.01.2004
    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!
     
  9. Jakob

    Jakob Thread Starter MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    Registriert seit:
    05.01.2004
    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.
     
Die Seite wird geladen...
Ähnliche Themen - Tabellenheader bleibt oben Forum Datum
Artikel soll wieder oben auf der Startseite stehen nachdem er aktualisiert wurde (Wor Web Page Design 11.06.2012
Div soll oben und unten "kleben" Web Page Design 16.12.2009
MU bild oben in der URL Web Page Design 10.11.2007
css a:hover bleibt nach Klick Web Page Design 04.08.2004

Diese Seite empfehlen

Benutzerdefinierte Suche