[CSS] first-child Opcje

[-Guest-]

Witam,

mam pytanko jak zrobic na CSS aby pierwsza kolumna lub wiersz tabeli byl w innym kolorze (mial inny styl).

probowalem na zasadzie

[HTML] pobierz, plaintext 
.tabelka td:first-child
[HTML] pobierz, plaintext 

ale ten sposob nie dziala pod IE.

Zalezy mi aby tabela byla bez zadnych div'ow. Czy da sie to zrobic na samym css jako wlasciwosci komorek?

[orson]

witam ...

nie

samym css się nie da ... można użyć js i manipulować domem ale dużo babrania ... jeżeli nie może być div to może span i wtedy nie będzie nowej linii za divem ...

pozdrawiam

ps. możesz zerknąć na tag colgroup i col ze specyfikacji html ... on będzie działał na kolumny ...

[dr_bonzo]

A nie mozesz nadac pierwszej kolumni/wierszowi innej wartosci atrybutu class?

[hwao]

da sie to latwo zrobic w js, Cudi kiedys pokazywal kod
Googluj

[batman]

Witam.

Da się to zrobić tylko za pomocą css. W pliku ze stylami definiujesz .td1 i .td2. Następnie stosujesz class="td1" w znacznikach td w jednym wierszu/kolumnie i class="td2" w pozostałych. W tem oto sposób masz jedną kolumnę lub jeden wiersz w innym kolorze.

[NuLL]

php Poczatkujacy -> CSS

[Kill3R]

Witam.

Da się to zrobić tylko za pomocą css. W pliku ze stylami definiujesz .td1 i .td2. Następnie stosujesz class="td1" w znacznikach td w jednym wierszu/kolumnie i class="td2" w pozostałych. W tem oto sposób masz jedną kolumnę lub jeden wiersz w innym kolorze.

hmm po co sobie tak komplikowac z klasami
jesli byloby wiecej wierszy to do kazdego dawac class="td2"

nie lepiej w ten sposob

[HTML] pobierz, plaintext 
<table id="tab">
<tr>
<th>cos</th>
<th>cos</th>
</tr>
<tr>
<td>cos</td>
<td>cos</td>
</tr>
<tr>
<td>cos</td>
<td>cos</td>
</tr>
</table>
[HTML] pobierz, plaintext 

a w stylach w ten sposob

[HTML] pobierz, plaintext 
table#tab {
tutaj style dla calej tabeli
}
#tab th {
tutaj style dla pierwszego wiersza
}
#tab td {
style dla pozostalych wierszy
}
[HTML] pobierz, plaintext 

no chyba ze chodzilo o cos innego


pozdrawiam

[dr_bonzo]

Ale <th> jest przeznaczone dla naglowkow tabeli, nie jej samej. A twoje rozwiazanie to wykorzystanie hack'a.

[Kill3R]

Ale <th> jest przeznaczone dla naglowkow tabeli, nie jej samej. A twoje rozwiazanie to wykorzystanie hack'a.

hmm ale wydaje mi sie ze o to chodzilo

kolega chcial pierwszy wiersz badz pierwsza kolumne wyroznic
wiec wydaje mi sie ze to jest dobry sposob

pierwszy wiersz

[HTML] pobierz, plaintext 
<table>
<tr><th></th><th></th></th>
 
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
[HTML] pobierz, plaintext 

pierwsza kolumna

[HTML] pobierz, plaintext 
<table>
<tr><th></th><td></td></td>
 
<tr><th></th><td></td></tr>
<tr><th></th><td></td></tr>
</table>
[HTML] pobierz, plaintext 

i wydaje mi sie ze to jest dobre rozwiazanie bo skoro nasz gosc chciap pierwszy wiersz lub pierwsza klumne to znaczy ze chcial wyroznic naglowek

[mike]

@Kill3R, tak. To rozwiązuje w pewien sposób problem. Ale tak jak zostało powiedziane jest to rozwiązzanie bazujące na hack'u.

Znacznik <th> został stworzony do określania nagłówka kolumny (stąd Twój drugi przykład jest niepoprawny "ideologicznie").

Z tego co pamiętam znacznik ten ma dodatkową własność podczas drukowania, w sytuacji kiedy tabela musi został podzielona na strony, to nagłówek utworzony za pomocą <th> zostanie powtórzony na każdej stronie. A to już nie nosi znamion pierwszego wiersza.

Tak więc rozwiązanie jest niezłe, ale bazujące na hack'u.

[revyag]

Kod

<style type="text/css">
table#tab {
    background-color:red;
}
table#tab td {
    background-color:blue;
}
table#tab td.first {
    background-color:green;
}
</style>

[HTML] pobierz, plaintext 
<table id="tab">
    <tr>
        <td class="first">Pierwszy wiersz</td>
    </tr>
    <tr>
        <td>drugi</td>
    </tr>
    <tr>
        <td>trzeci</td>
    </tr>
    <tr>
        <td>czwarty</td>
    </tr>
    </table>
[HTML] pobierz, plaintext 

Zrobienie jednej klasy dla pierwszego wiersza to chyba nie jest komplikowanie sobie życia