鼠標單擊時如何使動態表可滾動？

Question

我有一個html表：

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

表格可以有幾行，適合100px的高度區域。

然后，我定義了一個鼠標單擊事件，即當鼠標單擊每行的名稱列時，將在單擊的行后附加一些內容：

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

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

它可以正常工作，並且上述click事件可能會使表更長，因為如果單擊鼠標，則會在每行之后附加額外的內容行。

我的問題是 ，當鼠標單擊“名稱”列時如何使表格可滾動（滾動條）？ （默認情況下，這是不可滾動的，僅當鼠標單擊“名稱”時會觸發附加內容的附加內容，然后使其可滾動），以便表區域始終具有固定的高度100 px。

我在CSS中嘗試過：

.my-table{  
 overflow:scroll;
 height: 100px;
 width: 600px;
 overflow:auto;

}

但這不起作用...

Answer 1

使用Jquery，您可以添加

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

並且當您希望它可滾動時（帶有javascript事件）

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

Answer 2

table元素不會溢出，但是您可以在表格周圍使用包裝器，並在其中添加CSS：

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