Tabellenheader bleibt oben (fixed)

  1. Jakob

    Jakob Thread StarterMacUser Mitglied

    Mitglied seit:
    05.01.2004
    Beiträge:
    1.067
    Zustimmungen:
    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!
     
    Jakob, 01.10.2005
  2. eSynth

    eSynthMacUser Mitglied

    Mitglied seit:
    15.07.2005
    Beiträge:
    490
    Zustimmungen:
    0
    Ehm, link?
     
    eSynth, 01.10.2005
  3. moses_78

    moses_78MacUser Mitglied

    Mitglied seit:
    08.04.2005
    Beiträge:
    1.264
    Zustimmungen:
    22
    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.
     
    moses_78, 01.10.2005
  4. msslovi0

    msslovi0MacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    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
     
    msslovi0, 01.10.2005
  5. moses_78

    moses_78MacUser Mitglied

    Mitglied seit:
    08.04.2005
    Beiträge:
    1.264
    Zustimmungen:
    22
    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>
     
    moses_78, 01.10.2005
  6. msslovi0

    msslovi0MacUser Mitglied

    Mitglied seit:
    20.03.2005
    Beiträge:
    2.714
    Zustimmungen:
    115
    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, 01.10.2005
  7. moses_78

    moses_78MacUser Mitglied

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

    Jakob Thread StarterMacUser Mitglied

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

    Jakob Thread StarterMacUser Mitglied

    Mitglied seit:
    05.01.2004
    Beiträge:
    1.067
    Zustimmungen:
    21
    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.
     
    Jakob, 01.10.2005
Die Seite wird geladen...