Как исправить проблему неограниченной вертикальной прокрутки фиксированного столбца в HTML - PullRequest
Новая
       4

Как исправить проблему неограниченной вертикальной прокрутки фиксированного столбца в HTML

0 голосов
/ 08 декабря 2018

Я реализовал таблицу фиксированных столбцов в своем проекте asp.net mvc.Это нормально с горизонтальной прокруткой.Но когда я нахожу курсор на фиксированном столбце, столбец получает неограниченную вертикальную прокрутку и иногда непрерывно трясет экран.Это простое представление бритвы (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>

И это экран, когда я наводю указатель мыши на первый фиксированный столбец: enter image description here

N: B: когда я устанавливаю макет = ноль, это работает абсолютно нормально.Если у вас есть какой-либо конкретный совет / решение, пожалуйста, дайте мне знать, чтобы решить эту проблему неограниченной вертикальной прокрутки.Так что проблема была связана с макетом, который я использовал.В любом случае я избавился от проблемы с добавлением CSS в раздел ответов.

1 Ответ

0 голосов
/ 22 декабря 2018

Я исправил неограниченную вертикальную прокрутку фиксированного столбца, установив стиль фиксированных столбцов следующим образом: style="overflow-y: hidden;"

...