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

它起作用，上面的点击事件可以使表格更长，因为如果点击鼠标，每行后面会追加额外的内容行。

我的问题是，当鼠标点击“名称”列时，如何使表格可滚动（滚动条）？（默认情况下，这不是可滚动的，只有当鼠标点击“name”时才会触发额外的内容，然后使其可滚动），这样表格区域的固定高度始终为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/

单击鼠标时如何使我的动态表可滚动？

2 个答案: