Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Wysokość komórki tabeli.
Forum PHP.pl > Forum > Przedszkole
sadistic_son
Interesuje nas jeden wiersz z dwiema komórkami w tabeli. Komórka lewa jest nadrzędna a prawa podrzędna. Chodzi mi o to aby prawa zawsze przybierała wysokość komórki lewej, bez względu ile danych znajduje się w prawej. Jeśli więcej niż się zmieści to niech pojawia się pasek. Jak to zrobić? Próbowałem CSS ale jakoś mi nie wychodzi.
Oczywiście nie mogę ustalić na sztywno height ponieważ dane w lewej, i co za tym idzie również height są zmienne.
KrzysiekKCN
Nie jestem pewien czy to ci pomoże ale może:
https://developer.mozilla.org/en/DOM/element.offsetHeight
lub
https://developer.mozilla.org/en/DOM/element.clientHeight

Ja sobie to wyobrażam w ten sposób jak byś pobrał z rekordu lewego wysokość a do rekordu przypisał max-height: offsetHeight rekordu 1 i overflow: auto.
sadistic_son
Nie zupełnie o to mi chodziło. Wyjaśnię to jeszcze w nieco inny sposób. W prawej komórce mam wyświetlane zdjęcia jedno pod drugim, łącznie będą miały z 20000px. W lewej natomiast zmienny tekst, zazwyczaj w przedziale 700px-10000px. Jeśli w prawej nie dam max-height to mi się obie rozjadą na 20000px, natomiast jeśli dam np. max-height:700px to kiedy lewa ma wysokość np. 3000px to prawa jest za krótka.
KrzysiekKCN
Tak, właśnie oto mi chodzi.
Bardzo ciekawy pomysł z tą tabelą dlatego podłączam się do prośby
Ja napisałem takie coś, co szczerze muszę przyznać jest moim 1 skryptem w JAVA od 0 i kurcze jakoś nie chce działać, w każdym bądź razie na tej zasadzie to ma działać tak?

  1. <script type="text/javascript">
  2. function wys() {
  3. var new_height = rekord1.clientHeight;
  4. document.write ("<style type=\"text/css\"> #rekord1 { height: auto; background: red; color: black; font-weight: bold;}");
  5. document.write ("#rekord2 { max-height:" + new_height + "px; background: green; color: black; font-weight: bold; } </style>");
  6. }
  7. <script type="text/javascript"> wys();</script>
  8. <table style="text-align: left; width: 100px;" border="1"
  9. cellpadding="2" cellspacing="2">
  10. <tr>
  11. <td id="rekord1">1</td>
  12. <td id="rekord2">2</td>
  13. </tr>
  14. </tbody>
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.