Question

我在HTML模板中有以下静态代码：

<table>
    <thead></thead>
    <tbody></tbody>
</table>

我使用jQuery和AJAX动态地放置和删除表中的行和列，具体取决于用户交互。在表格下方，还有一些其他静态内容。如果表格很长，用户必须滚动很长时间才能到达表格下方的静态内容。为了避免这种情况，应该一次只显示表格的某些上部，并且表格应该有自己的滚动条，以便用户可以向下滚动表格或向下滚动整个页面，以便他们可以访问静态内容在桌子下面更快。

使用HTML5执行此操作的最佳方法是什么？我需要框架或一些特殊的CSS或JavaScript吗？非常感谢你提前！

Answer 1

你需要将表放在div中，并让div成为滚动的部分。

将该div设为固定高度，并在其CSS中使用overflow: auto（或overflow-y: ...）。这将确保表格中溢出div大小的部分可以滚动。

请参阅http://jsfiddle.net/alnitak/Y7Yg3/

Answer 2

你也可以单独为x轴和y轴设置溢出：

<style type="text/css">
    table td {
        border: 1px solid black;
        min-width: 50px;
        text-align: center;
    }
    div.scroll {
        float: left;
        overflow-x: hidden;
        overflow-y: scroll;
        max-height: 150px;
    }
</style>
<div class="scroll">
    <table>
        <thead></thead>
        <tbody>
            <tr><td>1</td><td>A</td></tr>
            <tr><td>2</td><td>B</td></tr>
            <tr><td>3</td><td>C</td></tr>
            <tr><td>4</td><td>D</td></tr>
            <tr><td>5</td><td>E</td></tr>
            <tr><td>6</td><td>F</td></tr>
            <tr><td>1</td><td>A</td></tr>
            <tr><td>2</td><td>B</td></tr>
            <tr><td>3</td><td>C</td></tr>
            <tr><td>4</td><td>D</td></tr>
            <tr><td>5</td><td>E</td></tr>
            <tr><td>6</td><td>F</td></tr>
            <tr><td>1</td><td>A</td></tr>
            <tr><td>2</td><td>B</td></tr>
            <tr><td>3</td><td>C</td></tr>
            <tr><td>4</td><td>D</td></tr>
            <tr><td>5</td><td>E</td></tr>
            <tr><td>6</td><td>F</td></tr>
        </tbody>
    </table>
</div>

另见：http://jsfiddle.net/wcwLT/

如何限制表的可见区域并使用滚动代替？

2 个答案: