GoldenLine
Zaloguj się

konto usunięte

Temat: naprzemienne tło wierszy w tabeli

Witam. Czy da radę osiągnąć taki efekt żeby co drugi wiersz w kolumnie miał inny kolor tła niż pozostałe?
Link do wypowiedziLink
Michał Stachura

Michał Stachura Dedykowane serwisy i
strony www -
http://santri.eu

Temat: naprzemienne tło wierszy w tabeli

<tr class='inny_kolor'><td>cośtam</td></tr>

<tr><td>cośtam innego</td></tr>

i tak na przemian aż Ci się tabelka skończy.Michał Stachura edytował(a) ten post dnia 21.01.10 o godzinie 22:43
Link do wypowiedziLink

konto usunięte

Temat: naprzemienne tło wierszy w tabeli

Michał Stachura:
i tak na przemian aż Ci się tabelka skończy.
Stare czasy - na szczęście w świecie CSS3 można już inaczej ;) 

tr:nth-child(odd) { background-color:#EEE; }

Powyższa reguła będzie pasować do każdego wiersza w tabeli, który jest pierwszym, trzecim i kolejnym dzieckiem swojego rodzica.

tr:nth-child(even) { background-color:#EEE; }

Ta zaś reguła pasuje do wierszy, które są drugim, czwartym i kolejnym dzieckiem swojego rodzica. Za pomocą pseudo-klasy ':nth-child()' można również wpływać na pojedyncze wiersze i komórki...
Link do wypowiedziLink

konto usunięte

Temat: naprzemienne tło wierszy w tabeli

http://www.google.pl/search?q=zebra+tables
Link do wypowiedziLink
Tobiasz Glazar

Tobiasz Glazar Front-End Developer

Temat: naprzemienne tło wierszy w tabeli

A to
http://www.keithclark.co.uk/labs/ie-css3/
żeby to, co napisał Waldek działało w IETobiasz Glazar edytował(a) ten post dnia 21.01.10 o godzinie 23:24
Link do wypowiedziLink

konto usunięte

Temat: naprzemienne tło wierszy w tabeli

Tobiasz Glazar:
http://www.keithclark.co.uk/labs/ie-css3/

Ciekawe - choć jeśli w danym projekcie korzysta się już z jakiego frameworka JS (np. jQuery), to bardziej się opłaca napisać mały plik JS specjalnie dla IE, niż doklejać inny framework...

Wszystko jest kwestią kalkulacji ;)
Link do wypowiedziLink
Michał Stachura

Michał Stachura Dedykowane serwisy i
strony www -
http://santri.eu

Temat: naprzemienne tło wierszy w tabeli

Waldek Mazurek:
Michał Stachura:
i tak na przemian aż Ci się tabelka skończy.
Stare czasy - na szczęście w świecie CSS3 można już inaczej ;)
Jak to dobrze wyprostować sobie stare podejście :)
Link do wypowiedziLink

konto usunięte

Temat: naprzemienne tło wierszy w tabeli

Waldek Mazurek:
Michał Stachura:
i tak na przemian aż Ci się tabelka skończy.
Stare czasy - na szczęście w świecie CSS3 można już inaczej ;) 

tr:nth-child(odd) { background-color:#EEE; }

Powyższa reguła będzie pasować do każdego wiersza w tabeli, który jest pierwszym, trzecim i kolejnym dzieckiem swojego rodzica.

tr:nth-child(even) { background-color:#EEE; }

Ta zaś reguła pasuje do wierszy, które są drugim, czwartym i kolejnym dzieckiem swojego rodzica. Za pomocą pseudo-klasy ':nth-child()' można również wpływać na pojedyncze wiersze i komórki...


o to chodziło, dzięki.
Link do wypowiedziLink

konto usunięte

Temat: naprzemienne tło wierszy w tabeli

lepiej zrobic to w javascriptcie.
Np w jQuery:

<script>
$('#tabelka td:odd').css({'background':'#cacaca'});
$('#tabelka td:even').css({'background':'#ffffff'});
</script>

dziala we wszystkich przegladarkach, z wlaczana obsluga javascript
Link do wypowiedziLink

konto usunięte

Temat: naprzemienne tło wierszy w tabeli

Piotr Pażuchowski:
lepiej zrobic to w javascriptcie.
Np w jQuery:

<script>
$('#tabelka td:odd').css({'background':'#cacaca'});
$('#tabelka td:even').css({'background':'#ffffff'});
</script>

dziala we wszystkich przegladarkach, z wlaczana obsluga javascript

Ostatnio robilem wlasnie cos takiego.
Caly design sobie ale mialem divy ktore byly szeregami i chcialem by co drugi byl w innym kolorze... Tak zeby jakis baran nie kombinowal jak to ostylowac, nazywac, pamietac jaki jest styl w templacie...
Po prostu jesli row jest w divie z classem "coloredTable" to ma mi w co drugim zmienic kolor. Bardzo uzyteczne.
No i w najgorszym przypadku, jesli ktos nie bedzie mial javascriptu z jakiegos wzgledu, to nie zmieni koloru.
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Adresy www i email w tabeli...




Wyślij zaproszenie do
Anuluj