Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Dziwne zachowanie tabelki
Forum PHP.pl > Forum > Przedszkole
lukash82
Witam. Mam takie pytanko odnosnie stylowania tabelek za pomoca css. Nie wiem jak obejsc taka rzecz. Mam tabelke w html gdzie fragment kodu wyglada tak:
  1. <tr>
  2. <td class="lewa">Średnica cylindrów/skok tłoka</td>
  3. <td class="prawa">110/125 mm</td>
  4. </tr>

I teraz stosuje style do odpowiednich klas uzytych w powyzszym kodzie:
  1. #strona .tresc .prawaTresc .podstrona .tekst .oferta_ciagniki .lewa{
  2. margin : 0px;
  3. padding : 3px;
  4. width : 194px;
  5. background-color : #CCCCCC;
  6. border-top : none;
  7. border-right : none;
  8. border-bottom : 1px solid red;
  9. border-left : 1px solid brown;
  10. vertical-align : top;
  11. text-align : left;
  12. }
  13. #strona .tresc .prawaTresc .podstrona .tekst .oferta_ciagniki .prawa{
  14. margin : 0px;
  15. padding : 3px;
  16. width : 394px;
  17. border-top : none;
  18. border-right : 1px solid orange;
  19. border-bottom : 1px solid green;
  20. border-left : 1px solid yellow;
  21. vertical-align : top;
  22. text-align : left;
  23. background-color : white;
  24. }

Dla zobrazowania efektu zrobilem kolorowe obramowanie wokol komorek. Efekt jaki uzyskuje wyglada tak jak na obrazku

Teraz pytanie. Dlaczego lewa komorka nie dostosowuje swej wysokosci do prawej komorki (w miejscu znaku zapytania). Nie podaje przeciez wysokosci tej komorce... Identyczna sytuacje, tzn dla innego wiersza komorek, ktore sa zawsze na koncu tabeli i wymagaja osobnego formatowania tez mam w tym samym kodzie ale tam wszystko jest ok, tzn wysokosc lewej komorki dopasowuje sie automatycznie do prawej i odwrotnie. Jesli ktos z Was wie co z tym fantem zrobic to prosze o jakas podpowiedz. Pozdrawiam, Łukasz.
JoShiMa
Podejrzewam, ze odpowiada za to vertical-align : top; W jakim celu to stosujesz?
Kostek.88
A gdy tymczasowo usuniesz style i włączysz obramowanie tabeli, to jak to wygląda? Możesz dać więcej kodu HTML?
lukash82
Witam ponownie. No niestety, usuniecie
  1. vertical-align : top;

nie pomoglo. Usunalem formatowanie tabeli i wrzucilem tylko zwyklego border-a. Wyglada to tak:

Czyli tak jakby lewa kolumna wysokoscia dopasowala sie do prawej... Wiec to jest to czego oczekuje. Ale co z tymi stylami jest nie tak, ze jak je zastosuje to sie to sypie? Jesli chodzi o wiecej kodu to wyglada on tak (wklejam tylko fragment bo cala tabela ma jakies 250 linijek ktore sie praktycznie powtarzaja)
  1. <table class="oferta_ciagniki" border="1">
  2. <tr>
  3. <td colspan="2" class="kategoria"><img src="images/kategoria_silnik.jpg" /></td>
  4. </tr>
  5. <tr>
  6. <td class="lewa">Marka</td>
  7. <td class="prawa">IVECO MOTORS</td>
  8. </tr>
  9. <tr>
  10. <td class="lewa">Homologacja</td>
  11. <td class="prawa">Wg dyrektywy 97/68/EC Stage 2</td>
  12. </tr>
Kostek.88
Pokaż kod całej strony WWW, u mnie ten fragment normalnie śmiga. Widocznie coś innego powoduje błąd.
lukash82
Witam ponownie. Juz sobie poradzilem. Dzieki Kaloryfer za pomoc. Rzeczywiscie blad byl calkowicie w innym miejscu. Stosowalem nazwy klas .lewa i .prawa a mialem takie same nazwy wykorzytane w podziale strony na lewa (menu) i prawa (z zawartoscia). Nie wiem czemu akurat do tego sie to doczepilo ale gdy zmienilem nazwy klas dzielacy strone na lewaTresc i prawaTresc wszystko poukladalo sie jak nalezy. Jeszcze raz dzieki za naprowadzenie. Pozdrawiam,Łukasz
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.