с вертикальной прокруткой, но без горизонтальной прокрутки на фиксированной таблице при прокрутке влево или вправо

Question

У меня есть фиксированный html-проект, который имеет выровненную по центру таблицу, которая обеспечивает огромные данные, которые прокручиваются по вертикали и по горизонтали. Для вертикальной прокрутки я клонировал заголовки таблиц и поместил их в новую фиксированную таблицу над таблицей отчетов (с помощью функций jquery clone() и append() и фиксированной позиции CSS) таким образом, когда пользователь прокручивает отчет по вертикали, тогда он все равно сможет видеть заголовки столбцов. Теперь проблема заключается в том, что при прокрутке вправо фиксированная таблица также прокручивается так, чтобы заголовки не совпадали с столбцами, как я могу сделать новую фиксированную таблицу таким образом, что горизонтальная прокрутка не делает фиксированную таблицу также прокрутите вправо. Фиксированная таблица имеет родительский элемент в качестве окна браузера. я получил jsfiddle образца Собирается, но я не могу получить заголовки, чтобы показать, когда Therre свитка в этом образце, на моем сайте он показывает, когда вертикальная прокрутка http://jsfiddle.net/wnxJ4/8/

var tableOffset = $("#table1").offset().top - 10; 
var $header = $("#table1 ").clone(); 
var $fixedtablehead = $("#fixedtablehead").append($header); 

$(window).bind("scroll", function() { 
    var offset = $(this).scrollTop(); 
    if (offset >= tableOffset && $fixedtablehead.is(":hidden")) { 
     $fixedtablehead.show().css({width: $('#table1').width()}); 
    } 
    else if (offset < tableOffset) { 
     $fixedtablehead.hide(); 
    } 
}); 

Я пытаюсь реализовать приведенный ниже код для горизонтальной прокрутки, но я не могу понять это правильно

var position = $(window).scrollLeft(); 
var lef=$('#fixedtablehead').offset().left; 
    alert(lef); 
    alert(lef-position); 
    $('#fixedtablehead').css('left',lef-position-position); 

Answer 1

Я думаю, вам нужно поставить стол и заголовок внутри DIV, что DIV внутри другого DIV с скроллинга и что DIV с фиксированное положение, заголовок должен располагаться абсолютно сверху, затем, когда вы прокручиваете Вы пролистывать все DIV (таблица + заголовок) и заголовок перемещается слишком

расположение:

<div> <-fixed 
    <div> <-scrollable 
    <table> <-header 
    <table> <-content 

http://jsfiddle.net/bba5g/

EDIT: вы должны иметь таблицу контента внутри DIV с вертикальной прокруткой только поэтому вы можете прокручивать содержание

Answer 2

JSFiddle Посмотрите на это здесь.

Возможно, этот тип конструкции может помочь.

HTML:

<div id='wrapper'> 
    <div class='header'> 
     <table class='table'> 
      <tr> 
       <th>Header1</th> 
       <th>Header2</th> 
       <th>Header3</th> 
      </tr> 
     </table> 
    </div> 
    <div class="scrollable"> 
     <table> 
      <tr> 
       <td>TD1</td> 
       <td>TD2</td> 
       <td>TD3</td> 
      </tr> 
      <tr> 
       <td>TD1</td> 
       <td>TD2</td> 
       <td>TD3</td> 
      </tr> 
      <tr> 
       <td>TD1</td> 
       <td>TD2</td> 
       <td>TD3</td> 
      </tr> 
      <tr> 
       <td>TD1</td> 
       <td>TD2</td> 
       <td>TD3</td> 
      </tr> 
     </table> 
    </div> 
</div> 

CSS:

.scrollable { 
    overflow: scroll; 
    height:50px; 
    background:#ccc; 
} 

Я до сих пор не уверен, если это то, что вы искали, но падение комментарий, если это не поможет.

Также осторожно с использованием переменных имени, вы используете переменную offset, и это также имя метода jQuery. Хотя использование может отличаться для вызова одного или другого, но всегда лучше избегать одинаковых имен для разных вещей.