+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: style tabeli (/thread-style-tabeli)
style tabeli - kamil90 - 18-11-2011
Witam,
na swojej stronce chcę zamieścić dwie tabelki, ale z różniącymi się nie co stylami, a mianowicie w pierwszej po najechaniu kursorem ma się zaznaczyć cały wiersz, a w drugiej pojedyncze komórki.
Napisałem coś takiego..
Kod:
/*nagłówek tabeli*/
table .thead {
background: #1e90ff;
color: #fff;
}
/**nagłówek tabeli**/
/*wnętrze tabeli*/
table .tbody {
background: transparent;
color: #000;
}
/*naprzemienne kolory*/
table .tbody tr:nth-child(even) {
background: #cae5ff;
}
table .tbody tr:nth-child(odd) {
background: #D6D6D6;
}
/**naprzemienne kolory**/
/*podświetlenie po najechaniu myszą*/
/*wiersza*/
table .tbody tr:hover {
background: #FFE9A0;
}
/*pojedynczej komórki*/
/*???*/
table tbody2 td:hover {
background: #FFE9A0;
}
/**podświetlenie po najechaniu myszą**/
/**wnętrze tabeli**/
/*stopka tabeli*/
table .tfoot {
background: #005bb2;
color: #fff;
text-align: right;
}
table .tfoot a:link, table .tfoot a:visited {
color: #fff;
text-decoration: underline;
}
table .tfoot a:hover {
color: #fff;
text-decoration: none;
}
/**stopka tabeli**/Pozdrawiam
kamil90
RE: style tabeli - Kartofelek - 19-11-2011
tbody2? Znowu ten html 7
Używaj klas
<table class=".....">
RE: style tabeli - kamil90 - 19-11-2011
ok, dzięki za radę, kod poprawiłem w pierwszym poście, ale dalej nie za bardzo wiem jak sobie poradzić z tym podświetlaniem wierszy i pojedynczych komórek, a do tego po zamianie na klasy nie bardzo mogę sobie poradzić z poprawieniem kodu html
Cytat:<table>
<table class="thead">
<tr>
<td>ID</td> <td>text text text</td> <td>text</td>
</tr>
</table>
<table class="tbody">
<tr>
<td>1</td> <td>text text text</td> <td>text</td>
</tr>
<tr>
<td>2</td> <td>text text text</td> <td>text</td>
</tr>
<tr>
<td>3</td> <td>text text text</td> <td>text</td>
</tr>
<tr>
<td>4</td> <td>text text text</td> <td>text</td>
</tr>
</table>
<table class="tfoot">
<tr>
<td colspan="3">Poprzedni Następny</td>
</tr>
</table>
</table>
RE: style tabeli - Kartofelek - 19-11-2011
NIE NIE NIE.
Kod:
<table class="tabelka_1">
...
</table>
<table class="tabelka_2">
...
</table>
<table class="tabelka_3">
...
</table>style:
Kod:
.tabelka_1 tr:hover {background:red;}
.tabelka_2 tr:hover {background:blue;}UCZ się z dobrych kursów.
RE: style tabeli - kamil90 - 19-11-2011
ok, dzięki za pomoc
