Blokowanie nagłówka przy wstawianiu długiej tabeli


(sdar) #1

Mam zapisaną w Excelu długą tabelę (7 kolumn i ponad 600 wierszy) z danymi.

Muszę wstawić ją na stronę ale zależy mi na tym, żeby przy przeglądaniu danych cały czas mieć "na widoku" nagłówkowy wiersz tej tabeli (podobnie jak można to zrobić w Excelu blokując wiersz nagłówkowy i przewijając samą zawartości z danymi).

Nie bardzo wiem jak to zrobić.

Wstawienie całej tabeli jako pływającej ramki oczywiście pozwala ją przewijać ale wtedy przewijany jest również wiersz tytułowy, który oczywiście "chowa" się pod ramkę.

Próbowałem również wstawić jako ramkę wyłącznie tabelę z danymi (bez nagłówka) a sam nagłówek wstawić w różnej formie nad tą ramką (jako grafikę, lub jako jednowierszową tabelę; w oddzielnej warstwie lub bez tworzenia warstwy) jednak rozwiązanie to powoduje, że strona wyświetla się poprawnie tylko w rozdzielczości, w której ją tworzę. Przy testach w innych rozdzielczościach, nagłówek przesuwa się odrobinę w bok co powoduje, że nagłówek nie pokrywa się dokładnie z poszczególnymi wierszami tabeli.

Czy ktoś zna jakiś sposób na umieszczenie na stronie długiej tabeli z zablokowanym wierszem nagłówkowym i możliwościa przewijania zawartości tej tabeli?


(Maniooo666) #2

Witam,

może uderz w takie coś:

.zawartosc{

      width: 760px;

      padding: 0px;

      margin: 0px auto;

      position: relative;

      left: -5px;

}

.komorka{

      border: 1px solid;

      text-align: center

}

http://www.kurshtml.boo.pl/style/rozmia ... epelnienie

| nagłówek 1 | nagłówek 2 | nagłówek 3 | nagłówek 4 | nagłówek 5 | nagłówek 6 | nagłówek 7 |

| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |
| komórka 1 | komórka 2 | komórka 3 | komórka 4 | komórka 5 | komórka 6 | komórka 7 |

[/code]

Generalnie dużo wymiarów na auto.

Wygląda to tak:

http://www.maniooo.pl/qpa.php

Obrzydliwe kolory zostawiłem, abyś łatwo poznał, co gdzie sięga.

Jak coś, to powalczymy dalej.


(sdar) #3

maniooo - prawie ot to mi chodziło ale jak wiemy "prawie" robi wielką różnicę :wink:

Twoje rozwiązanie pokazane TUTAJ też skutkuje przesunięciem wiersza nagłówka względem pozostałych kolumn (sprawdź przy różnych rozdzielczościach ekranu). Widać wyraźnie, że komórki nagłówka są przesunięte lekko względem kolumn tabeli (o "grubość" suwaka")


(Airborn) #4

sdar testowałem u siebie to co pokazał maniooo , na każdej rozdzielczości z przedziału 800x600 -> 1280x1024 wygląda tak samo, nagłówki są minimalnie szersze od komurek, ale można im nastawić odpowiednie width w stylach i będzie dobrze


(Maniooo666) #5

Witam,

u mnie nie skutkuje, ale może to dlatego, że mam zafiksowane wymiary strony na stałe.

Do tego WinXP i wyłączone bajery, czyli styl standard.

Może w tym ładnym stylu suwak ma inną szerokość (na pewno) i 98% width się nie spisuje.

Poza tym - nie męcz tych pikseli tak :wink: .

Pokaż tę stronę, będzie łatwiej.


(sdar) #6

Oto screen z tabeli:

f1b8c96251744507m.jpg

Szczególarz jestem :smiley:


(Airborn) #7
nagłówek 1

zmienił bym na

nagłówek 1

i poprostu eksperymentował z szerokością poszczególnych nagłówków


(Maniooo666) #8

Witam,

zapomiałem o JSP.

Dodaj do stylu .zawartosc linijkę text-align: left .

Zmniejszy to niekorzystny efekt.


(sdar) #9

Problem udało się rozwiązać. Rozwiązaniem tym okazało sie osadzenie jednej warstwy wewnątrz drugiej . Krótsza (wewnętrzna) warstwa zawiera treść tabeli z wykorzystaniem selektora overflow ( maniooo - dzięki za podsunięcie tego rozwiązania bo ja uparcie posługiwałem się pływającą ramką :wink: ), natomiast dłuższa (zewnętrzna) warstwa zawiera wiersz nagłówkowy. Szerokość warstwy z nagłówiekm ustawiona jest tak aby dopasować nagłówek do kolumn treści tabeli z pominięciem szerokości suwaka pojawiającego się po wykorzystaniu overflow .Ograniczenie szerokością warstw powoduje, że nagłówek nie przesuwa się względem treści tabeli niezależnie od rodzielczości, rodzaju przeglądarki i innych elementów mogących wpływać na pojawienie się tego efektu.

Bardzo dziękuję za pomoc.


(Maniooo666) #10

Witam,

To chyba nie selektor, a cecha (właściwość).

Mógłbyś rzucić kodem i linkiem?

Z ciekawości chętnie bym zerknął.