Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ukrycie kolumny wraz z tekstem w niej zawartym
Forum PHP.pl > Forum > Po stronie przeglądarki
bok
Witam,
Mam tabelę z dwoma kolumnami i każda ma 50% szerokości, i chce prawą kolumnę ukryć po kliknięciu klawisza UKRYJ, ale kolumna jeśli jest pusta (nie jest w niej nic napisane) to nie ma problemu znika prawidłowo, ale jak jest w niej coś napisane to są problemu tekst niby znika ale wygląda to tak jakby prawa kolumna nie mogła zniknąć bo tekst by jej przeszkadzał.
Zresztą sami zobaczcie:

  1. <table style="width: 100%" cellpadding="0">
  2. <tr>
  3. <td id="kol1" style="width: 50%; background-color: #008000;">tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</td>
  4. <td id="kol2" style="width: 50%; background-color: #FF0000;">teksttekstteksttekstteksttekstteksttekstteksttekstteksttekst</td>
  5. </tr>
  6.  
  7. <a href="javascript:uk()">UKRYJ</a>
  8. <a href="javascript:wy()">POKAZ</a>
  9.  
  10. <script type="text/javascript">
  11. function uk()
  12. {
  13. document.getElementById('kol1').style.width = '100%';
  14. document.getElementById('kol2').style.width = '0%';
  15. document.getElementById('kol2').style.visibility = 'hidden';
  16. }
  17. function wy()
  18. {
  19. document.getElementById('kol1').style.width = '50%';
  20. document.getElementById('kol2').style.width = '50%';
  21. document.getElementById('kol2').style.visibility = 'visible';
  22. }


Może ktoś z Was ma jakiś pomysł jak całkowicie ukryć prawą kolumnę wraz z tekstem w niej zawartym tak aby lewa komórka miała 100% szerokości?

Wielkie dzięki z góry za pomoc.
paziek
Kod
<script type="text/javascript">
function uk()
{
document.getElementById('kol1').style.width = '100%';
document.getElementById('kol2').style.display = 'none';
}
function wy()
{
document.getElementById('kol1').style.width = '50%';
document.getElementById('kol2').style.display = 'table-cell';
}
</script>
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.