HTML Tabelle Kopfzeile Fixieren

[Erzengel]

Hallo,

Habe ein Problem mit der HTML Tabelle
es sollen die Spalten Überschriften Fixiert werden.

<table>
   <tr>
      <th>Spalten Überschrift1
      <th>Spalten Überschrift 2
      <th>Spalten Überschrift 3
   </tr>
   <tr>
      <td>Zellen Inhalt 1
      <td>Zellen Inhalt 2
      <td>Zellen Inhalt 3
   </tr>
   <tr>
      <td>Zellen Inhalt 1
      <td>Zellen Inhalt 2
      <td>Zellen Inhalt 3
    </tr>
</table>

Alle Zeilen <th>Inhalte Sollen in der Ersten Zeile Fixiert stehen bleiben.
Alle andere Zeilen Sollen dann darunter Wegscrollen.

Habe dies schon mit <thead> und <tbody> Probiert aber ohne Erfolg
auch mit dem CSS position Fixed für den thead brachte keinen grossen Erfolg

Zwar blieb die Erste Zeile an ihren Platz allerdings die Daten Zeile war gleich
am Gleichen Platz wie die Überschriften Zeile und die Spalten Breite waren
Unterschiedlich.

Ebenso habe ich schon eine Tabelle alleine mit CSS gebaut
was aber wieder den Nachteil hat das diese in der Spaltenbreite
fixiert sein muss ansonsten verschieben sich unter Umständen
die Spaltenbreite pro Zeile.

Und Bei Einsatz von mehreren Tabellen wird dies auch recht aufwendig.
da dann jede Einzelne Tabelle erst mit CSS Erstellt werden muss.

Es Handelt sich ausschliesslich um Tabellarische Listen ähnlich Excel
hier jetzt etwas mit CSS zu Basteln möglich liegt aber nicht
im Grundgedanken der Format Beschreibungen.


der verwendete Browser ist Opera 11.6

Hoffe es kann mir wer weiterhelfen:?:

mfg Peter

 

[Wustersoss]

Du vergisst bei deiner Tabelle den tbody.

Schau mal hier: Pure CSS Scrollable Table with Fixed Header
im Quelltext ist die Beschreibung für alle Browser.

 

[Erzengel]

Die Seite habe ich mir angesehen

Hier der CSS Code den ich jetzt Heraus gefiltert um diesen Anzupassen

head:first-child+body thead[class].fixedHeader tr {
    display: block;
}
head:first-child+body tbody[class].scrollContent {
    display: block;
    height: 500px;
    overflow: auto;
}
head:first-child+body thead[class].fixedHeader th {
    width: 205px
}

head:first-child+body thead[class].fixedHeader th + th {
    width: 250px
}

head:first-child+body thead[class].fixedHeader th + th + th {
    
    width: 300px
}

head:first-child+body tbody[class].scrollContent td {
    width: 200px
}

head:first-child+body tbody[class].scrollContent td + td {
    width: 240px
}

head:first-child+body tbody[class].scrollContent td + td + td {
    
    width: 300px
}

Farb und Schrift Formatierungen werden woanders schon eingestellt und einige andere hatten keine Direkte einwirkung da für andere Browser
mit diesen CSS Code Funktioniert es jetzt

<table class="scrollTable">
<thead class="fixedHeader">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
</thead>
<tbody class="scrollContent">
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla vitae wisi. Nulla euismod aliquet tellus.</td>
        <td>In sit amet enim. Praesent vulputate tortor nec ante. Morbi sollicitudin est non neque.</td>
        <td>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</td>
    </tr>
    <tr>
        <td>Cell Content 1</td>
        <td>Cell Content 2</td>
        <td><select name="sampleSelect1" id="sampleSelect1"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option></select></td>
</tr>
    <tr>
        <td>Even More Cell Content 1</td>
        <td>Even More Cell Content 2</td>
        <td>Even More Cell Content 3</td>
    </tr>
    <tr>
        <td>End of Cell Content 1</td>
        <td>End of Cell Content 2</td>
        <td>End of Cell Content 3</td>
    </tr>
</tbody>
</table>

Das einzige was mich noch stört ist die Spaltenbreite die Fix eingestellt werden muss
Da der thead und der tbody voneinander getrennt sind und die Breiten zueinander
nicht automatisch angepasst werden.

Diese kann man auch direkt in den HTML Code Packen. ausser es hat noch wer eine Andere Lösung

mfg Peter

 

[Wustersoss]

Ich hatte mir verschiedene Lösungen dazu angesehen, alle hatten thead bzw. die Überschrift, wenn es anders gelöst wurde, vom td gelöst. Es scheint wohl sonst nicht zu funktionieren.

 

[threadi]

Auch bei mir funktioniert die von Wustersoss genannte Lösung perfekt. Alternativen gibt es noch, aber die funktionieren meist nur in einzelnen Browser, nicht so "global" wie diese Lösung hier.

 

[Erzengel]

Funktionieren tut diese Lösung auch bei mir.
Das Einzige ist halt noch die Variable Spalten Breite.
Die sich ja bei Verschiedenen Einträgen ja auch Automatisch anpassen muss.

Hier ist Global nur noch Browser bezogen und nicht mehr Projekt Bezogen.