Ukrycie kolumny wraz z tekstem w niej zawartym Opcje

[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:

[HTML] pobierz, plaintext 
<table style="width: 100%" cellpadding="0">
	<tr>
		<td id="kol1" style="width: 50%; background-color: #008000;">tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst tekst</td>
		<td id="kol2" style="width: 50%; background-color: #FF0000;">teksttekstteksttekstteksttekstteksttekstteksttekstteksttekst</td>
	</tr>
</table>
 
<a href="javascript:uk()">UKRYJ</a>
<a href="javascript:wy()">POKAZ</a>
 
<script type="text/javascript">
function uk()
{
document.getElementById('kol1').style.width = '100%';
document.getElementById('kol2').style.width = '0%';
document.getElementById('kol2').style.visibility = 'hidden';
}
function wy()
{
document.getElementById('kol1').style.width = '50%';
document.getElementById('kol2').style.width = '50%';
document.getElementById('kol2').style.visibility = 'visible';
}
</script>
[HTML] pobierz, plaintext 

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>