[CSS]Position: fixed i jeżdżący <thead> Opcje

[Mades]

Mam taki problem, że dla tagu <thead></thead> nie mogę nadać

[HTML] pobierz, plaintext 
thead {
position: fixed;
}
[HTML] pobierz, plaintext 

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.

[PHP] pobierz, plaintext 
<?php
if(mysql_num_rows($wynik) > 0) { 
    /* jeżeli wynik jest pozytywny, to wyświetlamy dane */ 
echo '<table border="0">';
 
echo '<thead id="fix">';
echo "<th>Od</th>";
echo "<th>Lekcja</th>";
echo "<th>Klasa</th>";
echo "<th>Przedmiot</th>";
echo "<th>Nauczyciel nieobecny</th>";
echo "<th>Nauczyciel zastepujący</th>";
 
echo "</thead>";
 
 
 
    while($r = mysql_fetch_assoc($wynik)) { 
        echo "<tr>"; 
        echo "<td>".$r['Data1']."</td>"; 
        echo "<td>".$r['Lekcja1']."</td>"; 
 
        echo "<td>".$r['Klasa']."</td>"; 
        echo "<td>".$r['Przedmiot']."</td>"; 
        echo "<td>".$r['Nauczyciel_nieobecny']."</td>"; 
        echo "<td>".$r['Nauczyciel_zastepujacy']."</td>"; 
 
        echo "</tr>"; 
    } 
    echo "</table>"; 
} 
?>
[PHP] pobierz, plaintext 

Ten post edytował Mades 11.01.2014, 15:02:44

[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:

[CSS] pobierz, plaintext 
thead:not(.fix) {
   position: fixed;
}
[CSS] pobierz, plaintext 

[Mades]

Dodaję, ponieważ chcę, aby ta tabelka "Od", "Lekcja", "Przedmiot" itd. zawsze trzymała się u góry strony podczas scrollowania.

[tomxx]

[PHP] pobierz, plaintext 
<?php
if(mysql_num_rows($wynik) > 0) { 
    /* jeżeli wynik jest pozytywny, to wyświetlamy dane */ 
echo '<table border="0">';
 
echo '<thead id="fix">';
echo "<th id=data>Od</th>";
echo "<th id=lekcja>Lekcja</th>";
echo "<th id=klasa>Klasa</th>";
echo "<th id=przedmiot>Przedmiot</th>";
echo "<th id=nieobecny>Nauczyciel nieobecny</th>";
echo "<th id=zastępujący>Nauczyciel zastepujący</th>";
 
echo "</thead><tbody style='padding-top: 22px'>";
 
 
 
    while($r = mysql_fetch_assoc($wynik)) { 
        echo "<tr>"; 
        echo "<td class=data>".$r['Data1']."</td>"; 
        echo "<td class=lekcja>".$r['Lekcja1']."</td>"; 
 
        echo "<td class=klasa>".$r['Klasa']."</td>"; 
        echo "<td class=przedmiot>".$r['Przedmiot']."</td>"; 
        echo "<td class=nieobecny>".$r['Nauczyciel_nieobecny']."</td>"; 
        echo "<td class=zastępujący>".$r['Nauczyciel_zastepujacy']."</td>"; 
 
        echo "</tr>"; 
    } 
    echo "</tbody></table>"; 
} 
?>
 
<script>
// Ustawiają szerokość komórek sekcji thead
document.getElementById("data").style.width = document.getElementsByClassName("data")[0].offsetWidth;
document.getElementById("lekcja").style.width = document.getElementsByClassName("lekcja")[0].offsetWidth;
document.getElementById("klasa").style.width = document.getElementsByClassName("klasa")[0].offsetWidth;
document.getElementById("przedmiot").style.width = document.getElementsByClassName("przedmiot")[0].offsetWidth;
document.getElementById("nieobecny").style.width = document.getElementsByClassName("nieobecny")[0].offsetWidth;
document.getElementById("zastępujący").style.width = document.getElementsByClassName("zastępujący")[0].offsetWidth;
</script>
[PHP] pobierz, plaintext 

Do tbody dodałem padding-top, aby sekcja thead nie zasłaniała pierwszego wiersza tabeli.

Ten post edytował tomxx 11.01.2014, 17:43:17