0

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

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

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

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

4

2 回答 2

4

您需要将表格放在一个 div 中，并让该 div 成为滚动的部分。

给那个 div 一个固定的高度，并且overflow: auto（或overflow-y: ...）在它的 CSS 中。这将确保溢出 div 大小的表格部分是可滚动的。

见http://jsfiddle.net/alnitak/Y7Yg3/

于 2012-12-17T16:35:29.533 回答
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/

于 2012-12-17T16:42:21.903 回答