Фиксация элемента по оси Y, но прокрутка страницы по оси x?

Можно ли зафиксировать элемент в позиции «y» на странице, но при прокрутке влево и вправо этот элемент также прокручивается по оси x?Фиксация элемента по оси Y, но прокрутка страницы по оси x?

В моем случае у меня есть таблица данных, которая содержит всего 20 столбцов (слишком много для отображения без прокрутки страницы). Я хотел бы исправить заголовки таблиц в верхней части страницы, однако это также исправляет прокрутку x, поэтому при прокрутке влево и вправо заголовки не перемещаются. Можно ли только фиксировать y-позиционирование элемента?

Я создал основную скрипку, показывающую стандартную таблицу здесь: http://jsfiddle.net/0n9d92er/. В принципе, я хочу, чтобы заголовок 1-20 был установлен сверху (для вертикальной прокрутки), но при прокрутке вправо я должен видеть каждый заголовок от 1 до 20 (при горизонтальной прокрутке).

.header { 
 
    width: 2000px; 
 
} 
 
.tg { 
 
    border-collapse:collapse; 
 
    border-spacing:0; 
 
} 
 
.tg td { 
 
    font-family:Arial, sans-serif; 
 
    font-size:14px; 
 
    padding:10px 5px; 
 
    border-style:solid; 
 
    border-width:1px; 
 
    overflow:hidden; 
 
    word-break:normal; 
 
} 
 
.tg th { 
 
    font-family:Arial, sans-serif; 
 
    font-size:14px; 
 
    font-weight:normal; 
 
    padding:10px 5px; 
 
    border-style:solid; 
 
    border-width:1px; 
 
    overflow:hidden; 
 
    word-break:normal; 
 
} 
 
.tg .tg-i7wz { 
 
    font-size:20px 
 
}

<table class="tg"> 
 
    <tr> 
 
    <th class="tg-i7wz">HEADER 1</th> 
 
    <th class="tg-031e">HEADER 2</th> 
 
    <th class="tg-031e">HEADER 3</th> 
 
    <th class="tg-031e">HEADER 4</th> 
 
    <th class="tg-031e">HEADER 5</th> 
 
    <th class="tg-031e">HEADER 6</th> 
 
    <th class="tg-031e">HEADER 7</th> 
 
    <th class="tg-031e">HEADER 8</th> 
 
    <th class="tg-031e">HEADER 9</th> 
 
    <th class="tg-031e">HEADER 10</th> 
 
    <th class="tg-031e">HEADER 11</th> 
 
    <th class="tg-031e">HEADER 12</th> 
 
    <th class="tg-031e">HEADER 13</th> 
 
    <th class="tg-031e">HEADER 14</th> 
 
    <th class="tg-031e">HEADER 15</th> 
 
    <th class="tg-031e">HEADER 16</th> 
 
    <th class="tg-031e">HEADER 17</th> 
 
    <th class="tg-031e">HEADER 18</th> 
 
    <th class="tg-031e">HEADER 19</th> 
 
    <th class="tg-031e">HEADER 20</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT </td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
</table>

Спасибо за любую помощь заранее.

источник

2015-08-07 developthewebz

Вы хотите чистым решением css или может быть jQuery? – gioNicol

Вот краткий пример, который не требует JQuery, и использует JavaScript, чтобы плавать заголовок вниз, как страница прокручивается:

var thead = document.querySelector(".tg tr:first-child"); 
 
window.onscroll = function() { 
 
    thead.style["-webkit-transform"] = "translateY(" + window.scrollY + "px)"; 
 
    thead.style.transform = "translateY(" + window.scrollY + "px)"; 
 
};

.header { 
 
    width: 2000px; 
 
} 
 
.tg { 
 
    border-collapse:collapse; 
 
    border-spacing:0; 
 
} 
 
.tg td { 
 
    font-family:Arial, sans-serif; 
 
    font-size:14px; 
 
    padding:10px 5px; 
 
    border-style:solid; 
 
    border-width:1px; 
 
    overflow:hidden; 
 
    word-break:normal; 
 
} 
 
.tg th { 
 
    font-family:Arial, sans-serif; 
 
    font-size:14px; 
 
    font-weight:normal; 
 
    padding:10px 5px; 
 
    border-style:solid; 
 
    border-width:1px; 
 
    overflow:hidden; 
 
    word-break:normal; 
 
} 
 
.tg .tg-i7wz { 
 
    font-size:20px; 
 
} 
 

 
.tg tr:first-child { 
 
    background-color: white; 
 
    outline: solid 1px black; 
 
}

<table class="tg"> 
 
    <tr> 
 
    <th class="tg-i7wz">HEADER 1</th> 
 
    <th class="tg-031e">HEADER 2</th> 
 
    <th class="tg-031e">HEADER 3</th> 
 
    <th class="tg-031e">HEADER 4</th> 
 
    <th class="tg-031e">HEADER 5</th> 
 
    <th class="tg-031e">HEADER 6</th> 
 
    <th class="tg-031e">HEADER 7</th> 
 
    <th class="tg-031e">HEADER 8</th> 
 
    <th class="tg-031e">HEADER 9</th> 
 
    <th class="tg-031e">HEADER 10</th> 
 
    <th class="tg-031e">HEADER 11</th> 
 
    <th class="tg-031e">HEADER 12</th> 
 
    <th class="tg-031e">HEADER 13</th> 
 
    <th class="tg-031e">HEADER 14</th> 
 
    <th class="tg-031e">HEADER 15</th> 
 
    <th class="tg-031e">HEADER 16</th> 
 
    <th class="tg-031e">HEADER 17</th> 
 
    <th class="tg-031e">HEADER 18</th> 
 
    <th class="tg-031e">HEADER 19</th> 
 
    <th class="tg-031e">HEADER 20</th> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT </td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="tg-031e">CONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENTCONTENT CONTENT</td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    <td class="tg-031e"></td> 
 
    </tr> 
 
</table>

JSFiddle Версия: http://jsfiddle.net/0n9d92er/4/

источник

2015-08-07 19:51:31

Фиксация элемента по оси Y, но прокрутка страницы по оси x?

ответ

Смежные вопросы