tabelka z co ktoryms rzedem odrozniajacym sie

0

Witam. I przyszlo i sie bawic dzisiaj z CSS ;d I mam maly problem. Z gory przepraszam za moja nieznajomosc CSS i ignorancje - nie mam z tym do czynienia na codzien, wiec i nie znam wszystkich mykow.
Problem jest nastepujacy: mam tabele ktora jest podzielona na takie logiczne 'bloki' po X rzedow kazdy - kazdy blok ma te same kolumny, wiec tabela wyglada dobrze, ale chcialbym moc te bloki jakos oddzielic. Musialbym jakos dodac klase / styl dla pierwszego / ostatniego rekordu w danym bloku (np. pierwszy rzad ma border-top, lub ostatni rzad ma border-bottom). Nie wiem ile bedzie blokow, nie wiem ile bedzie rzedow w danym bloku.
Poki co mam cos takiego, ze przed kazdym blokiem mam wstawiony 1 rzad, ktory wyglada tak:

(colspan 2 bo sa tylko 2 kolumny, a chce zeby linia byla przez calosc tabelki) oraz taka klase: .blockseparator { border-top: 1px solid #999; }

i wyglada to nawet ladnie (pod google-chrome), ale mam wrazenie ze to jest jakis marny hack. Czy CSS ma jakies lepsze opcje aby uzyskac to czego szukam?
Jesli nie, to czy to rozwiazanie dziala przez przypadek, czy bedzie przenosne? Mam na mysli to ze ten rzad nie ma danych, i nie jest wcale pokazany ponad to, ze widac ta ramke.

0

Powyzsze rozwiazanie ma maly problem - jesli blok ma ustawiony background-color, to ten pierwszy / ostatni rekord nie ma koloru, i jest pokazany waski bialy pasek...

0

Czy rozwiazanie z grupowaniem rzedow w elemencie tbody i nadaniu mu jakiejs klasy z border-bottom: 1px solid; jest poprawne, i zgodne z obowiazujacymi standardami?

0

Lepszy zamiast długaśnego opisu byłby działający przykład.
Nie możesz tej klasy dopisać do <tr> i potem zrobić:

tr.blockseparator td {
     border-top: 1px solid #999;
 }

i nie tworzyć pustego wiersza, tylko dodać go do następnego po Twoim pustym wierszu? (chyba, że masz niezerowy border-spacing, no to wtedy faktycznie nie)

0

Problem jest taki, ze to sa takie templaty, i ja mam zwrocic kolekcje blokow, a kazdy blok ma kolekcje wierszy. To sa same dane, bez zadnych cssow ani htmli. O pomysle z dodaniem klasy do pierwszego wiersza myslalem, ale to by znaczylo, ze kazdy wiersz w bloku musialby miec dodatkowa informacje czy jest pierwszy czy nie, zeby pozniej silnik wzorcow po prostu to info wyciagnal i dodal klase lub nie. Troche duzo zachodu mi sie wydaje, ale jak nic innego nie bedzie dobrze to zrobie to w ten wlasnie sposob.
Rozwiazanie z tbody owijajacego kazdy blok wierszy dziala.

0

Dodanie tbody czy oznaczenie pierwszego wiersza to wciąż oznaczenie pierwszego wiersza w kodzie w jakiś sposób. Myślałem, żeby to otaczać sekcjami tbody i potem - poprawnie zrobić coś takiego: tbody tr td { border ... } - ale zaproponowałem opcję mniej wymagającą.

Wciąż nie wiem jak to możliwe, że dodanie stylu do tbody daje Ci jakiś efekt.
U mnie nie widać tego ani na Operze, ani na FF, ani na IE -- http://jsbin.com/arulak/edit#html,live

0

Ok, nie wiem jak to mozliwe, ale ten Twoj przyklad nie ma ramek. Natomiast w aplikacji z ktora pracuje tbody dostaje autentycznie ramke... Nie potrafie tego wytlumaczyc, co wiecej, wzialem zrodlo stronki, wkleilem css do head, i rowniez nie dziala. Magia. Ale to jest zle rozwiazanie, jak sie takie dziwa dzieja ;d

Zrobilem tak:

.bigtable tbody.block tr:last-child {
border-bottom: 1px solid #999;
}

i rowniez dziala. tbody ma klase, poniewaz jest wiecej tabelek z klasa .bigtable i nie chce zeby czasami moje nowe reguly cos namieszaly. Moze byc takie rozwiazanie?

0

Ok, ten sposob znowu nie dziala w tym edytorze on line... Ale ten dziala:

table.bigtable tbody.block tr:last-child td {...}

Czyli biore ostatni tr w .block, i wszystkim td daje ramke.

Wlasnie dlatego nienawidze css, jakies cos sie dzieje i nie wiadomo co jest 5.

Wielkie dzieki za pomoc, szczegolnie za wskazanie ze moj pomysl nie dziala i nakierowanie na lepsze rozwiazanie!

0

Jednak nie zwariowalem, oto jak mozna miec ramke na tbody:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS Bin</title> <style> table { border-collapse: collapse; } tbody { border-bottom: 1px solid red; } </style> </head> <body>

Hello World

testtest
</body> </html>

Slowo klucz: border-collapse: collapse. Pytanie czy to jest przenosne...

0
mućka napisał(a):

Wlasnie dlatego nienawidze css, jakies cos sie dzieje i nie wiadomo co jest 5.

Nie nie, tam wszystko jest logiczne i wg określonej zasady. A stylowanie na tabeli czegoś, co nie jest renderowane to nie dziwne, że nie widać (tak działają tabele, ja rozumiem istotę ich działania, niekoniecznie potrafię to ładnie opisać, od ładnego opisywania jest @ bswierszczynski)

Nie spodziewałem się, że na border-collapse to podziała. Jeżeli działa Ci pod IE/FF/Opera/Chrome to jest ok i zostaw tak ;)

0

Dziala pod chrome, ie8 oraz firefoxami. Poki co to zostaje. Ale i tak dzieki za pomoc, w razie czego mam jeszcze 2 rozwiazania ktore moge uzyc (ten myk z last-child / first child - last-child to css3 - lub w kodzie zwracac info jaka klase ma miec dany rekord, i pomijac caly ten bajzel z tbody itp).

0

:first-child działa na IE8, :last-child nie, więc lepiej użyć tego pierwszego ;)

1 użytkowników online, w tym zalogowanych: 0, gości: 1