How to make my dynamic table scrollable when mouse clicked?

I have a html table:

<table id="my-table" class="my-table">

        <tr class="head">                                
               <th class="name">Name:</th>
               <th class="age">Age:</th>
        </tr>

        <tr class="row">
               <td class="name">John</td>
               <td class="age">19</td>
        </tr class="row">

    <tr class="row">
               <td class="name">Kate</td>
               <td class="age">16</td>
        </tr>
       ...
       ...

  </table>

The table can have several rows which fits 100px height area.

Then, I defined a mouse click event, that's when mouse click on each row's name column, there will be some content be appended after the clicked row:

function addContent(evt){
   $('.row').after("<tr>"+SOME_CONTENT+"</tr>");
}

$(".name").click(addContent);

It works and the above click event could make the table much longer, since extra content row are appended after each row if mouse clicked.

My Question is, how to make the table scrollable (scroll bar) when mouse clicked on the "name" column? (That's by default, not scrollable, only when mouse clicked on "name" which triggered extra content appended, then makes it scrollable), so that the table area has the fixed height 100 px always.

I tried in CSS:

.my-table{  
 overflow:scroll;
 heig开发者_开发技巧ht: 100px;
 width: 600px;
 overflow:auto;

}

but it does not work...

table elements don't overflow, but you could use a wrapper surrounding the table and add your css to that:

http://jsfiddle.net/2ezdx/1/

With Jquery, you could add

$(".my-table").css('overflow','hidden')

and when you want it to be scrollable (with a javascript event)

$(".my-table").css('overflow','scroll')