Załóżmy, że mamy następujący fragment kodu HTML:

<table class="tabela">
<tr class="wiersz">
<td>komórka 1</td>
<td>komórka N</td>
<td>
<table class="wewnetrzna">
<tr>
<td></td>
<tr>
</table>
</td>
<tr>
</tabela>

.tabela .wiersz td {
padding 10px;
}

.wewnetrzna tr td {
padding: 5px;
}

Problem w tym, że tabela wewnętrzna dziedziczy cechy po tabeli zewnętrznej.
Padding dla komórki wewnętrznej wynosi więc 10px zamiast 5px. Czy istnieje
możliwość w CSS wymyszenia aby tabela wewnętrzna nie dziedziczyła niczego
po rodzicu? Ta tabela wewnętrzna będzie używana w różnych miejscach kodu
HTML i nie chcę aby jakaś przypadkowa właściwość rodzica przedarła się do
jej wnętrza. Odpada więc stosowanie !important do każdego atrybutu stylu.

do góry

Możesz zrobić .tabela .wiersz > td, aby 10px padding miały tylko te komórki,
które znajdują się bezpośrednio w danym wierszy tabeli zewnętrznej. Bo
aktualnie Twoja reguła łapie wszystkie komórki, niezależnie od tego jak
odległymi potomkami .wiersz są.

wtorek, 15 listopada 2011 23:53 wielka mądrość na czytelników pl.comp.www
spłynęła, gdy tako rzekł(a) Marek:

> Problem w tym, że tabela wewnętrzna dziedziczy cechy po tabeli
> zewnętrznej. Padding dla komórki wewnętrznej wynosi więc 10px zamiast 5px.
> Czy istnieje możliwość w CSS wymyszenia aby tabela wewnętrzna nie
> dziedziczyła niczego po rodzicu?

Problemem nie jest dziedziczenie, tylko specyficzność selektorów, które
sobie stworzyłeś. Poczytaj o ,,specificity" CSS. Jest o tym w specyfikacji
W3C, ale opisane w bardzo lapidarny sposób. Kiedyś był o tym fajny artykuł
w języku polskim, ale strona, na której się znajdował, już nie istnieje. Nie
mam więc żadnego sprawdzonego źródła, do którego mógłbym Cię odesłać.
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

do góry

Hej,

W dniu 2011-11-15 23:53, Marek pisze:
> Załóżmy, że mamy następujący fragment kodu HTML:
[...]
> .tabela .wiersz td {
> padding 10px;
> }
> .wewnetrzna tr td {
> padding: 5px;
> }
[...]
> Czy istnieje
> możliwość w CSS wymyszenia aby tabela wewnętrzna nie dziedziczyła niczego
> po rodzicu? Ta tabela wewnętrzna będzie używana w różnych miejscach kodu
> HTML i nie chcę aby jakaś przypadkowa właściwość rodzica przedarła się do
> jej wnętrza. Odpada więc stosowanie !important do każdego atrybutu stylu.

.tabela > td {padding: 10px;} ?
Uważaj na IE6, jeśli Ci jeszcze zależy...

A ogólnie jeśli chodzi Ci o dziedziczenie z innych miejsc, to chyba
musiał byś określić z góry wszystkie wartości dla tej wewnętrznej
tabeli. Czyli z góry zdefiniować te wartości, które mogą być
nadpisane... Albo zadbać o kod jak powyżej, tam gdzie będzie ona występować.

P.S. Potrafisz uzasadnić sens zagnieżdżania tabeli? Nie wystarczy Ci jedna?

--
Pozdrawiam,
Grzegorz Gawlik
http://gregbike.carbonmade.com

do góry

Dnia Wed, 16 Nov 2011 00:22:08 +0100, Gregbike napisał(a):

> .tabela > td {padding: 10px;} ?
> Uważaj na IE6, jeśli Ci jeszcze zależy...

Nie :-) Skansenu nie prowadzę :-)

> A ogólnie jeśli chodzi Ci o dziedziczenie z innych miejsc, to chyba
> musiał byś określić z góry wszystkie wartości dla tej wewnętrznej
> tabeli. Czyli z góry zdefiniować te wartości, które mogą być
> nadpisane...

No tak,... a jakie będą atrybuty stylu w CSS4, CSS5, CSS N abym je również
tam uwzględnił ? :-)

> Albo zadbać o kod jak powyżej, tam gdzie będzie ona występować.

Na to nie mam wpływu :-( CVhodzi o stworzenie "obiektu" wyglądającego
zawsze tak samo niezależnie gdzie się go osadzi.

> P.S. Potrafisz uzasadnić sens zagnieżdżania tabeli? Nie wystarczy Ci jedna?

Trzebaby przemyśleć i zastąpić ją np. DIVami. Pierwsza tablela zawiera
wyniki wyszukiwania - jeden rekord na jeden wiersz (kolumny to parametry
poszczególnych rekordów). Druga zaś ma być wycentrowana względem pierwszej
i jest przełącznikiem między grupami wyników. Z pewnością nie da się tego
zrobić na jednej tabeli.

do góry

P.S.
Taki selektor wyników stosują też Google w wynikach wyszukiwania. Kiedyś
przerabiałem temat stosowania DIVów lecz występował jakiś problem. Nie
pamiętam już jaki. Najprawdopodobniej otaczający całość DIV nie potrafił
dostosować szerokości do swojej zawartości (przed epoką display:table) i w
związku z tym nie dawało się go centraować itp.

do góry

W dniu 2011-11-16 09:53, Marek pisze:
> Dnia Wed, 16 Nov 2011 00:22:08 +0100, Gregbike napisał(a):
>> .tabela> td {padding: 10px;} ?
>> Uważaj na IE6, jeśli Ci jeszcze zależy...
> Nie :-) Skansenu nie prowadzę :-)

I bardzo dobrze, ale wolałem uprzedzić. Nie pamiętam też czy IE7 sobie
radził...

> No tak,... a jakie będą atrybuty stylu w CSS4, CSS5, CSS N abym je również
> tam uwzględnił ? :-)

Niestety gwarancji nigdy nie ma. Chcesz być pewny wyglądu elementu -
wstaw go w innej technologii, np obrazku hyhyhy ;) a i tu nie ma
pewności, że ktoś coś kiedyś...

> Na to nie mam wpływu :-( CVhodzi o stworzenie "obiektu" wyglądającego
> zawsze tak samo niezależnie gdzie się go osadzi.

Hmm to może znany i nielubiany iframe? :) Nie znam dokładnie przypadku.

>> P.S. Potrafisz uzasadnić sens zagnieżdżania tabeli? Nie wystarczy Ci jedna?
> Trzebaby przemyśleć i zastąpić ją np. DIVami. Pierwsza tablela zawiera
> wyniki wyszukiwania - jeden rekord na jeden wiersz (kolumny to parametry
> poszczególnych rekordów). Druga zaś ma być wycentrowana względem pierwszej
> i jest przełącznikiem między grupami wyników. Z pewnością nie da się tego
> zrobić na jednej tabeli.

A czy ten przełącznik to dane tabelaryczne? Bo wydaje mi się, że nie
bardzo. Jeśli nie to odpowiedź nasuwa się sama...

--
Pozdrawiam,
Grzegorz Gawlik
http://gregbike.carbonmade.com

do góry

W dniu 2011-11-16 10:04, Marek pisze:
> P.S.
> Taki selektor wyników stosują też Google w wynikach wyszukiwania.

Google to akurat nadal kiepski wzór do naśladownictwa, jeśli chodzi o
jakość kodu HTML. W wielkich korporacjach często jak by jakość kodu na
ostatnim miejscu. Koszty i szybkość (wykonania) najważniejsza. Do tego
dochodzi też zasiedziałość pracowników.

> Kiedyś
> przerabiałem temat stosowania DIVów lecz występował jakiś problem. Nie
> pamiętam już jaki. Najprawdopodobniej otaczający całość DIV nie potrafił
> dostosować szerokości do swojej zawartości (przed epoką display:table) i w
> związku z tym nie dawało się go centraować itp.

Wiele się zmieniło. Może warto spróbować na nowo?

--
Pozdrawiam,
Grzegorz Gawlik
http://gregbike.carbonmade.com

do góry

Dnia Wed, 16 Nov 2011 14:58:27 +0100, Gregbike napisał(a):

> Wiele się zmieniło. Może warto spróbować na nowo?

Może i tak... jednakże kwestia sposobu na "przerywanie" niechcianego
dziedziczenia nadal pozostaje aktualna. :-(

do góry

Dnia Wed, 16 Nov 2011 14:56:37 +0100, Gregbike napisał(a):

>
>> Na to nie mam wpływu :-( CVhodzi o stworzenie "obiektu" wyglądającego
>> zawsze tak samo niezależnie gdzie się go osadzi.
>
> Hmm to może znany i nielubiany iframe? :) Nie znam dokładnie przypadku.

O rany, iframe :-D Budowanie strony z iframe'ów tylko po to aby przerwać
dziedziczenie jest trochę dziwaczne. Taki iframe musiałby dostosowywać swój
wymiar do zawartości - czyli zachowywać się jak zwykły tag typu <div>.
Zresztą iframe korzysta z kodu innego skryptu (PHP) a nie tego, w którym
jest osadzony a po drugie - kliknięcie na numerze strony rekordu musiałoby
przeładowywać skrypt, który osadza ten "obiekt". Robi się to nieziemsko
skomplikowane.

Znasz dokładnie przypadek - opisałem Ci go i komentujesz to poniżej nawet.
:-)

> A czy ten przełącznik to dane tabelaryczne? Bo wydaje mi się, że nie
> bardzo. Jeśli nie to odpowiedź nasuwa się sama...

Wydaje mi się, że tabela jednowierszowa i wielokolumnowa to też tabela. Po
drugie dane w niej są informacją sekwencyjną - coś w rodzaju rekordów z
bazy danych. Można je więc uznać za tabelaryczne. Rozważania mogą
doprowadzić do dwóch skrajnych wniosków bo również typowe dane tabelaryczne
można próbować uznać za nie-tabelaryczne na bazie filozoficznych rozważań.

do góry

W dniu 2011-11-16 14:58, Gregbike pisze:
> W dniu 2011-11-16 10:04, Marek pisze:
>> P.S.
>> Taki selektor wyników stosują też Google w wynikach wyszukiwania.
>
> Google to akurat nadal kiepski wzór do naśladownictwa, jeśli chodzi o
> jakość kodu HTML. W wielkich korporacjach często jak by jakość kodu na
> ostatnim miejscu. Koszty i szybkość (wykonania) najważniejsza. Do tego
> dochodzi też zasiedziałość pracowników.

Skłaniałbym się raczej ku temu, że to nie wina pracowników, a tzw.
"superwajzorów". To tam trafiają pomysły i są też akceptowane lub
torpedowane. Z różnych względów, w tym także politycznych (wpływy w
firmie), a także z braku znajomości czym jest "łeb" ( nie są "up to
date" :-/ ).

--
Peter

do góry