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...:)