[JQUERY] stupid fixed header

[cino]

Hallo zusammen,

ich bin absoluter Neuling was JavaScript oder jquery betrifft. Hänge momentan an einem Projekt, es geht um eine Web-Applikation mit überwiegend html und php.

Habe eine Tabelle in HTML und möchte diese ab der dritten Zeile "scrollbar" machen. Hab auch schon was von jquery entdeckt, das nennt sich stupid fixed Header (jquery.fixedheader.js), aber wie kann ich diese Funktion auf meine Tabelle anwenden?


Stupid Fixed Header for HTML table



Mein HTML Code mit der Tabelle:

<!-- Tabelle -->
<table div="data" class="tg">

<tr> <!-- Prozesse Zeile-->
    <th class="tg-2thk" colspan="4"><b>Prozesse</b></th>
    <th class="tg-2thk">ENG.2<br>System</th>
    <th class="tg-2thk">ENG.3<br>System</th>
    <th class="tg-2thk">ENG.4<br>Software</th>
    <th class="tg-2thk">ENG.5<br>Software</th>
    <th class="tg-2thk">ENG.6 K<br>Software</th>
    <th class="tg-2thk">ENG.6 T<br>Software</th>
    <th class="tg-2thk">ENG.7<br>Software</th>
    <th class="tg-2thk">ENG.8<br>Software</th>
    <th class="tg-2thk">ENG.9<br>System</th>
    <th class="tg-2thk">ENG.10<br>System</th>
    <th class="tg-hy62" colspan="2"></th>
  </tr>
  <tr> <!-- Gewichtung der Prozesse Zeile -->
    <td class="tg-2thk" colspan="4"><b>Gewichtung der Prozesse (%)</b></td>
    <td class="tg-031e"><input id="test" name="prozent" type="text" size="4" value="1" maxlength="3"></td>
    <td class="tg-031e"><input id="test" name="prozent" type="text" size="4" value="1" maxlength="3"></td>
    <td class="tg-031e"><input id="test" name="prozent" type="text" size="4" value="1" maxlength="3"></td>
    <td class="tg-031e"><input id="test" name="prozent" type="text" size="4" value="1" maxlength="3"></td>
    <td class="tg-031e"><input id="test" name="prozent" type="text" size="4" value="1" maxlength="3"></td>
    <td class="tg-031e"><input id="test" name="prozent" type="text" size="4" value="1" maxlength="3"></td>
    <td class="tg-031e"><input id="test" name="prozent" type="text" size="4" value="1" maxlength="3"></td>
    <td class="tg-031e"><input id="test" name="prozent" type="text" size="4" value="1" maxlength="3"></td>
    <td class="tg-031e"><input id="test" name="prozent" type="text" size="4" value="1" maxlength="3"></td>
    <td class="tg-031e"><input id="test" name="prozent" type="text" size="4" value="1" maxlength="3"></td>
    <td class="tg-hy62" colspan="2"></td>
  </tr>
  <tr> <!-- Modul Name Zeile -->
    <td class="tg-2thk" colspan="2"><b>Modul Namen</b></td>
    <td class="tg-2thk"><b>FP</b></td>
    <td class="tg-2thk"><b>Rework</b></td>
    <td class="tg-2thk" colspan="10"><b>Prozess-Vollstaendigkeit (%)</b></td>
    <td class="tg-2thk" colspan="2"><b>Modul Vollstaendigkeit</b></td>
  </tr>

Dies sind die ersten drei Zeilen der Tabelle, die Tabelle hat insgesamt 15 Zeilen. Ich möchte das die ersten drei fix bleiben und der rest "scrollbar".

Hoffe ihr könnt mir helfen

Vielen Dank und Gruß
Cino

 

[Sempervivum]

Wenn ich das Beispiel auf der Seite des Plugins richtig verstehe, fixiert dieses nur den Header. Was Du beschreibst, dass die ersten drei Zeilen fixiert werden, geht damit wahrscheinlich nicht.
Möglicher Weise wäre es ein Workaround, wenn Du die ersten drei Zeilen in eine getrennte Tabelle legst und die weiteren in einen scrollbaren Container. Wenn Du für beide Tabellen das selbe CSS verwendest, müsste es sich machen lassen, dass sie nahtlos anschließen.
Oder du verwendest eine geschachtelte Tabelle und legst eine Untertabelle mit den ersten drei Zeilen in den Header.