滚动表格

Question

我试试这个网格，请查看链接link reference。

现在我成功显示了这个，但没有滚动。 检查图片：

我使用表格来显示这样的数据：

<table id="tabledata" cellspacing="0" style="width: 100%; border-collapse: collapse;">

</table>

我在jquery

中添加了这两个类

$("#tabledata tr:first").addClass('GridviewScrollHeader');
$("#tabledata tr").addClass('GridviewScrollItem');

我也添加了这个

<script type="text/javascript">
 $(document).ready(function () {
     gridviewScroll();
 });
 function gridviewScroll() {
     $('#tabledata').gridviewScroll({
         width: 660,
         height: 200
     });
 } 

所以我如何添加：

GridviewScrollPager

Answer 1

您就是这样做的：

<table cellspacing="0" cellpadding="0" border="0" width="300">
<tr>
    <td>
        <table cellspacing="0" cellpadding="1" border="1" width="300">
            <tr style="color:white;background-color:grey">
                <th>Name</th>
                <th>Class</th>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>
        <div style="width:320px; height:100px; overflow:auto;">
            <table cellspacing="0" cellpadding="1" border="1" width="300">
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
                <tr>
                    <td>asd</td>
                    <td>53</td>
                </tr>
            </table>
        </div>
    </td>
</tr>

Answer 2

你可以做这样的事情

<table id="tabledata" cellspacing="0" style="width: 100%; border-collapse: collapse;">
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody class="scroll_me">
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>

</table>

<style>
.scroll_me
{
    max-height:200px;
    overflow-y:scroll
}
</style>