How to hide the column borders dynamically

I have two radio buttons r1 and r2 and 2 text boxes t1 and t2.

If I click r1 the text boxes should be hidden. If I click r2 text boxes should be visible. This works.

My problem is that if click r1, the text boxes and the column border should be hidden.

How to do it?

---

code from comments:

<TR height="20"> 
<TD class="fieldcellbright" colspan="1">Mode:<FONT color="red">*</FONT></TD>
<TD class="fieldcellbright" colspan="1">&nbsp;<INPUT type="radio" name="rad" id="r2">r2</TD> 
<TD class="fieldcellbright" colspan="1">&nbsp;开发者_运维知识库<INPUT type="radio" name="rad" id="r1">r1</TD> 
</TR> 

JS:

if(r1.checked == true){ t1.style.visibility="hidden"; t2.style.visibility="hidden"; } 

---

Take a look at the 17.3 column section in the below link

http://www.w3.org/TR/CSS2/tables.html

I think it will be useful for you...:)