Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Position: fixed i jeżdżący <thead>
Forum PHP.pl > Forum > Przedszkole
Mades
Mam taki problem, że dla tagu <thead></thead> nie mogę nadać
  1. thead {
  2. position: fixed;
  3. }


Ponieważ cała strona się rozpada.

Bez "position: fixed;" strona wygląda tak:

A po dodaniu tak. Pasek się rozsypał, lecz jest non stop u góry:


Jak widać - cała strona się sypie, przez co nie mogę zrobić, żeby tag <thead> był cały czas u góry strony.
Potrzebuję pomocy. Muszę uzyskać efekt taki, żeby pasek był non stop u góry strony bez rozsypywania się paska.

  1. <?php
  2. if(mysql_num_rows($wynik) > 0) {
  3. /* jeżeli wynik jest pozytywny, to wyświetlamy dane */
  4. echo '<table border="0">';
  5.  
  6. echo '<thead id="fix">';
  7. echo "<th>Od</th>";
  8. echo "<th>Lekcja</th>";
  9. echo "<th>Klasa</th>";
  10. echo "<th>Przedmiot</th>";
  11. echo "<th>Nauczyciel nieobecny</th>";
  12. echo "<th>Nauczyciel zastepujący</th>";
  13.  
  14. echo "</thead>";
  15.  
  16.  
  17.  
  18. while($r = mysql_fetch_assoc($wynik)) {
  19. echo "<tr>";
  20. echo "<td>".$r['Data1']."</td>";
  21. echo "<td>".$r['Lekcja1']."</td>";
  22.  
  23. echo "<td>".$r['Klasa']."</td>";
  24. echo "<td>".$r['Przedmiot']."</td>";
  25. echo "<td>".$r['Nauczyciel_nieobecny']."</td>";
  26. echo "<td>".$r['Nauczyciel_zastepujacy']."</td>";
  27.  
  28. echo "</tr>";
  29. }
  30. echo "</table>";
  31. }
  32. ?>
tomxx
Jeżeli bez position:fixed masz wszystko ok, to czemu to dodajesz?
A jeśli masz na stronie więcej znaczników thead i tylko do tej reszty ma być fixed, to użyj:
  1. thead:not(.fix) {
  2. position: fixed;
  3. }
Mades
Dodaję, ponieważ chcę, aby ta tabelka "Od", "Lekcja", "Przedmiot" itd. zawsze trzymała się u góry strony podczas scrollowania.
tomxx
  1. <?php
  2. if(mysql_num_rows($wynik) > 0) {
  3. /* jeżeli wynik jest pozytywny, to wyświetlamy dane */
  4. echo '<table border="0">';
  5.  
  6. echo '<thead id="fix">';
  7. echo "<th id=data>Od</th>";
  8. echo "<th id=lekcja>Lekcja</th>";
  9. echo "<th id=klasa>Klasa</th>";
  10. echo "<th id=przedmiot>Przedmiot</th>";
  11. echo "<th id=nieobecny>Nauczyciel nieobecny</th>";
  12. echo "<th id=zastępujący>Nauczyciel zastepujący</th>";
  13.  
  14. echo "</thead><tbody style='padding-top: 22px'>";
  15.  
  16.  
  17.  
  18. while($r = mysql_fetch_assoc($wynik)) {
  19. echo "<tr>";
  20. echo "<td class=data>".$r['Data1']."</td>";
  21. echo "<td class=lekcja>".$r['Lekcja1']."</td>";
  22.  
  23. echo "<td class=klasa>".$r['Klasa']."</td>";
  24. echo "<td class=przedmiot>".$r['Przedmiot']."</td>";
  25. echo "<td class=nieobecny>".$r['Nauczyciel_nieobecny']."</td>";
  26. echo "<td class=zastępujący>".$r['Nauczyciel_zastepujacy']."</td>";
  27.  
  28. echo "</tr>";
  29. }
  30. echo "</tbody></table>";
  31. }
  32. ?>
  33.  
  34. <script>
  35. // Ustawiają szerokość komórek sekcji thead
  36. document.getElementById("data").style.width = document.getElementsByClassName("data")[0].offsetWidth;
  37. document.getElementById("lekcja").style.width = document.getElementsByClassName("lekcja")[0].offsetWidth;
  38. document.getElementById("klasa").style.width = document.getElementsByClassName("klasa")[0].offsetWidth;
  39. document.getElementById("przedmiot").style.width = document.getElementsByClassName("przedmiot")[0].offsetWidth;
  40. document.getElementById("nieobecny").style.width = document.getElementsByClassName("nieobecny")[0].offsetWidth;
  41. document.getElementById("zastępujący").style.width = document.getElementsByClassName("zastępujący")[0].offsetWidth;
  42. </script>
Do tbody dodałem padding-top, aby sekcja thead nie zasłaniała pierwszego wiersza tabeli.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.