如何解决 html 中固定列的无限垂直滚动问题

Question

我在我的 asp.net mvc 项目中实现了固定列 table。水平滚动没问题。但是当我将鼠标悬停在固定列上时，该列会无限垂直滚动，有时还会连续摇动屏幕。这是简单的剃刀视图(NewTable.cshtml):

<style>
    table {
        table-layout: fixed;
        width: 100%;
        *margin-left: -100px; /*ie7*/
    }

    td, th {
        vertical-align: top;
        border-top: 1px solid #ccc;
        padding: 10px;
        width: 100px;
    }

    .fix {
        position: absolute;
        *position: relative;
        margin-left: -100px;
        width: 100px;
    }

    .outer {
        position: relative;
    }

    .inner {
        overflow-x: scroll;
        overflow-y: visible;
        width: 400px;
        margin-left: 100px;
    }
</style>
<h2>This is fixed column demo</h2>
<div class="inner">
    <table class="table">
        <thead>
            <tr>
                <th class="fix">Header 1</th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th>Header 4</th>
                <th>Header 5</th>
                <th>Header 5</th>
                <th>Header 5</th>
                <th>Header 5</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="fix">data 1</td>
                <td>data 2</td>
                <td>data 3</td>
                <td>data 4</td>
                <td>data 5</td>
                <td>data 5</td>
                <td>data 5</td>
                <td>data 5</td>

            </tr>
        </tbody>
    </table>
</div>

这是我将鼠标悬停在第一个固定列上时的屏幕：

N:B: 当我设置 layout=null 时，这绝对没问题。如果您有任何特定的 hint/solution 那么请让我知道如何解决这个无限垂直滚动问题。所以问题与我使用的布局有关。无论如何，我解决了在答案部分添加 css 的问题。

Answer 1

我通过像这样设置固定列的样式来修复固定列的无限垂直滚动：style="overflow-y: hidden;"

如何解决 html 中固定列的无限垂直滚动问题

How to fix unlimited vertical scrolling issue of fixed column in html

html

css

asp.net

asp.net-mvc-4