Большая таблица динамического размера html с фиксированной строкой прокрутки и фиксированной колонкой прокрутки

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

   browser window\/
+--------------------------------------------------------------+  /\
|   /\     /\  /\         /\       /\      /\     /\ /\        |  fixed static
|    web page header fields and text                           |  |  size
|   \/    \/   \/         \/       \/     \/     \/   \/       |__\/__
|               +----<<<table-scrollbar>>>>>----------------+  |  /\
|+--------------+--------+--------+--------+--------+-------+  |   |
||              |        |colspan |        |        | fixed |  |   |
||  fixed       |  fixed |  fixed | fixed  |  fixed | more> |  |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       || |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+t |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |a |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+b |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |l |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+e |   set
||  fixed       |  |  |  |   |    |  |  |  |        |       || |   dynamic
||  multi-line  |  |  |  |   |    |  |  |  |        |       |s |   size at
|+--------------+--+--+--+---+----+--+--+--+--------+-------+c |   runtime
||  fixed       |  |  |  |   |    |  |  |  |        |       |r |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+o |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |l |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------+l |   |
||  fixed       |  |  |  |   |    |  |  |  |        |       |b |   |
||              |  |  |  |   |    |  |  |  |        |       |a 
|+--------------+--+--+--+---+----+--+--+--+--------+-------+r |   |
|| fixed, moreV |  |  |  |   |    |  |  |  |        |       || |   |
|+--------------+--+--+--+---+----+--+--+--+--------+-------++ |__\/__
|   /\     /\  /\         /\       /\      /\     /\ /\        |  /\
|    web page footer fields and text                           |  fixed static
|   \/    \/   \/         \/       \/     \/     \/   \/       |  |  size
+--------------------------------------------------------------+  \/

это нужно только в современных браузерах, используя все /any: html, css, javascript, jquery

порядок важности:

  • сложная таблица со многими полями формы, скрытыми значениями, сбрасыванием строк в JavaScript и т.д., которые я добавлю позже
  • 1-я строка будет иметь colspans
  • строки будут иметь переменную высоту
  • 1-я строка: фиксированная от вертикальной прокрутки, но может прокручиваться по горизонтали
  • 1-я колонка: фиксированная от горизонтальной прокрутки, но может прокручиваться по вертикали
  • динамически размер этой "таблицы", чтобы заполнить экран между заголовком/нижним колонтитулом статического размера
  • расположение полос прокрутки (как показано в моем удивительном асьи, выше) не критично.

вот очень простой образец html экрана, без каких-либо особенностей прокрутки/калибровки:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>big scrolling table example</TITLE>
</HEAD>

<BODY>
  <form name="MyForm" method="POST" action="">
    <!-- static size header junk--><!-- static size header junk--><!-- static size header junk-->
    <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="35%" align="left">header junk left</td>
    <td >- HEADER JUNK MIDDLE -</td>
    <td width="35%" align="right">header junk right</td>
    </tr>
    </table>
    <br>
    <table border="0" width="95%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="60%" align="left">header junk left</td>
    <td width="40%" align="right">check it out! <input type="checkbox" onchange="alert('your javascript here');" value="Y" name="checkitout"></td>
    </tr>


    <!-- big table here!!--><!-- big table here!!--><!-- big table here!!--><!-- big table here!!-->

    <table border="1" width="95%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td>fixed can be long<br>or short</td>
    <td colspan="4">scroll A</td>
    <td colspan="2">scroll B</td>
    <td >scroll C</td>
    <td colspan="4">scroll D</td>
    <td colspan="2">scroll E</td>
    <td >scroll F</td>
    <td colspan="4">scroll G</td>
    <td colspan="2">scroll H</td>
    <td >scroll I</td>
    <td colspan="4">scroll J</td>
    <td colspan="2">scroll K</td>
    <td >scroll L</td>
    <td colspan="4">scroll M</td>
    <td colspan="2">scroll N</td>
    <td >scroll O</td>
    </tr>

    <tr>
        <td>fixed 2</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 3</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 4</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...<br>more...<br>more...<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 5</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H<br>H<br>H<br>H<br>H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>
    <tr>
        <td>fixed 6<br>6<br>6<br>6</td>
        <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
        <td>1 B</td><td>2 B</td>
        <td >1 C</td>
        <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
        <td>1 E</td><td>2 E</td>
        <td >1 F</td>
        <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
        <td>1 H</td><td>222 H</td>
        <td >1 I</td>
        <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
        <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
        <td >1 L</td>
        <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
        <td>1 N</td><td>2 N</td>
        <td >1 1 1 1 1 1 1 O</td>
    </tr>

    </table>


    <!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk-->
    <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
    <tr>
    <td width="35%" align="left">footer junk left</td>
    <td >- FOOTER JUNK MIDDLE -</td>
    <td width="35%" align="right">footer junk right</td>
    </tr>

  </form>
</BODY>
</HTML>

ОТВЕТЫ

Ответ 1

Изменить 5: - Добавлены настраиваемые фиксированные строки и столбцы. - Исправлены проблемы с шириной и высотой столбцов - Сокращение использования сложных селекторов

Применение:

    $('#cTable').cTable({
        width: 1300,  
        height: 500,  
        fCols: 2,
        fRows: 2
    });

DEMO: http://jsfiddle.net/rCuPf/7/embedded/result/ (обновленная версия)

Изменить 4: Обновлено для colSpan в столбце 1. Демо: http://jsfiddle.net/skram/rKjk3/26/

Изменить 3: Проделали некоторые исправления и некоторые исправления: http://jsfiddle.net/rKjk3/22 Протестировано в IE9, FF и Хром. (У меня нет последнего IE, чтобы проверить его сейчас)

Изменить 2: Исправление для IE: http://jsfiddle.net/rKjk3/15/embedded/result/ (см. выше)

Изменить 1: Исправить для окна изменения размера http://jsfiddle.net/rKjk3/11/ (см. выше)

  • Добавлен обработчик события window.resize для установки ширины rightContainer, поэтому ширина фактической таблицы будет увеличена по мере изменения размера.
  • Удалена фиксированная ширина на SBWrapper, чтобы она могла полностью использовать доступное пространство внутри контейнера.

Я создал 2 демо для вашего требования.

  • Образец, чтобы показать, как выглядит рендеринг html с простой структурой разметки. Это позволит вам взглянуть на структуру, которая отображается и как она работает:)
    DEMO: http://jsfiddle.net/GmJ22/7/

  • Фактическая демонстрация с разметкой, которую вы разместили. Код является лишь грубой версией и может потребовать некоторой очистки. Прямо сейчас вы можете настроить ширину и высоту таблицы. Я отправляю его, чтобы вы могли взглянуть и дать мне несколько отзывов.
    DEMO: http://jsfiddle.net/rKjk3/10/embedded/result/ (см. ниже фиксированные версии)

Полный код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<TITLE>big scrolling table example</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
    $(function() {
        $.fn.cTable = function(o) {        

            this.wrap('<div class="cTContainer" />');
            this.wrap('<div class="relativeContainer" />');    
            //Update below template as how you have it in orig table
            var origTableTmpl = '<table border="1" cellspacing="1" cellpadding="0" align="center" width="95%" ></table>';            
            //get row 1 and clone it for creating sub tables
            var row1 = this.find('tr').slice(0, o.fRows).clone();

            var r1c1ColSpan = 0;
            for (var i = 0; i < o.fCols; i++ ) {
                r1c1ColSpan += this[0].rows[0].cells[i].colSpan;
            }

            //create table with just r1c1 which is fixed for both scrolls
            var tr1c1 = $(origTableTmpl);
            row1.each(function () {            
                var tdct = 0;
                $(this).find('td').filter( function () {
                    tdct += this.colSpan;
                    return tdct > r1c1ColSpan;
                }).remove();                
            });
            row1.appendTo(tr1c1);
            tr1c1.wrap('<div class="fixedTB" />');
            tr1c1.parent().prependTo(this.closest('.relativeContainer'));

            //create a table with just c1        
            var c1= this.clone().prop({'id': ''});
            c1.find('tr').slice(0, o.fRows).remove();
            c1.find('tr').each(function (idx) {
                var c = 0;
                $(this).find('td').filter(function () {
                    c += this.colSpan;
                    return c > r1c1ColSpan;
                }).remove();           
            });

            var prependRow = row1.first().clone();
            prependRow.find('td').empty();
            c1.prepend(prependRow).wrap('<div class="leftSBWrapper" />')
            c1.parent().wrap('<div class="leftContainer" />');            
            c1.closest('.leftContainer').insertAfter('.fixedTB');

            //create table with just row 1 without col 1
            var r1 = $(origTableTmpl);
            row1 = this.find('tr').slice(0, o.fRows).clone();
            row1.each(function () {
                var tds = $(this).find('td'), tdct = 0;
                tds.filter (function () {
                    tdct += this.colSpan;
                    return tdct <= r1c1ColSpan;
                }).remove();
            });
            row1.appendTo(r1);
            r1.wrap('<div class="topSBWrapper" />')
            r1.parent().wrap('<div class="rightContainer" />')  
            r1.closest('.rightContainer').appendTo('.relativeContainer');

            $('.relativeContainer').css({'width': 'auto', 'height': o.height});

            this.wrap('<div class="SBWrapper"> /')        
            this.parent().appendTo('.rightContainer');    
            this.prop({'width': o.width});    

            var tw = 0;
            //set width and height of rendered tables
            for (var i = 0; i < o.fCols; i++) {
                tw += $(this[0].rows[0].cells[i]).outerWidth(true);
            }
            tr1c1.width(tw);
            c1.width(tw);

            $('.rightContainer').css('left', tr1c1.outerWidth(true));

            for (var i = 0; i < o.fRows; i++) {
                var tr1c1Ht = $(c1[0].rows[i]).outerHeight(true);
                var thisHt = $(this[0].rows[i]).outerHeight(true);
                var finHt = (tr1c1Ht > thisHt)?tr1c1Ht:thisHt;
                $(tr1c1[0].rows[i]).height(finHt);
                $(r1[0].rows[i]).height(finHt);
            }
            $('.leftContainer').css({'top': tr1c1.outerHeight(true), 'width': tr1c1.outerWidth(true)});

            var rtw = $('.relativeContainer').width() - tw;
            $('.rightContainer').css({'width' : rtw, 'height': o.height, 'max-width': o.width - tw});    

            var trs = this.find('tr');
            trs.slice(1, o.fRows).remove();
            trs.slice(0, 1).find('td').empty();
            trs.each(function () {
                var c = 0;
                $(this).find('td').filter(function () {
                    c += this.colSpan;
                    return c <= r1c1ColSpan;
                }).remove();
            });

            r1.width(this.outerWidth(true));

            for (var i = 1; i < c1[0].rows.length; i++) {
                var c1Ht = $(c1[0].rows[i]).outerHeight(true);
                var thisHt = $(this[0].rows[i]).outerHeight(true);
                var finHt = (c1Ht > thisHt)?c1Ht:thisHt;
                $(c1[0].rows[i]).height(finHt);
                $(this[0].rows[i]).height(finHt);
            }

            $('.SBWrapper').css({'height': $('.relativeContainer').height() - $('.topSBWrapper').height()});            

            $('.SBWrapper').scroll(function () {
                var rc = $(this).closest('.relativeContainer');
                var lfW = rc.find('.leftSBWrapper');
                var tpW = rc.find('.topSBWrapper');

                lfW.css('top', ($(this).scrollTop()*-1));
                tpW.css('left', ($(this).scrollLeft()*-1));        
            });

            $(window).resize(function () {
                $('.rightContainer').width(function () {
                    return $(this).closest('.relativeContainer').outerWidth() - $(this).siblings('.leftContainer').outerWidth();
                });

            });
        }

        $('#cTable').cTable({
            width: 1300,
            height: 500,
            fCols: 2,
            fRows: 2
        });
    });
</script>
<style>
    .cTContainer { overflow: hidden; padding: 2px; }
    .cTContainer table { table-layout: fixed; }
    .relativeContainer { position: relative; overflow: hidden;}    
    .fixedTB { position: absolute; z-index: 11;  }
    .leftContainer { position: absolute; overflow: hidden;  }
    .rightContainer { position: absolute; overflow: hidden;  }
    .leftSBWrapper { position: relative; z-index: 10; }
    .topSBWrapper { position: relative; z-index: 10; width: 100%; }
    .SBWrapper { width: 100%; overflow: auto; }

    td { background-color: white; overflow: hidden; padding: 1px; }    
</style>
</HEAD>
<BODY>
  <form name="MyForm" method="POST" action="">
    <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
        <tr>
        <td width="35%" align="left">header junk left</td>
        <td >- HEADER JUNK MIDDLE -</td>
        <td width="35%" align="right">header junk right</td>
        </tr>
    </table>
    <br />
    <table border="0" width="95%" cellspacing="1" cellpadding="0" align="center">
        <tr>
        <td width="60%" align="left">header junk left</td>
        <td width="40%" align="right">check it out! <input type="checkbox" onchange="alert('your javascript here');" value="Y" name="checkitout"></td>
        </tr>
    </table>

    <!-- big table here!!--><!-- big table here!!--><!-- big table here!!--><!-- big table here!!-->
    <table border="1" width="95%" cellspacing="1" cellpadding="0" align="center" id="cTable" >
        <tr>
            <td width="5%" colspan="3">fixed can be long<br>or short</td>
            <td width="9%" colspan="4">scroll A</td>
            <td width="7%" colspan="2">scroll B</td>
            <td width="3%">scroll C</td>
            <td width="9%" colspan="4">scroll D</td>
            <td width="7%" colspan="2">scroll E</td>
            <td width="3%">scroll F</td>
            <td width="9%" colspan="4">scroll G</td>
            <td width="7%" colspan="2">scroll H</td>
            <td width="3%">scroll I</td>
            <td width="9%" colspan="4">scroll J</td>
            <td width="7%" colspan="2">scroll K</td>
            <td width="3%">scroll L</td>
            <td width="9%" colspan="4">scroll M</td>
            <td width="7%" colspan="2">scroll N</td>
            <td width="3%">scroll O</td>
        </tr>
        <tr>
            <td width="5%" colspan="3">2nd fixed header</td>
            <td width="9%" colspan="4">scroll 2A</td>
            <td width="7%">scroll 2B-1</td>
            <td width="7%">scroll 2B-2 </td>
            <td width="3%">scroll 2C</td>
            <td width="9%" colspan="4">scroll 2D</td>
            <td width="7%" colspan="2">scroll 2E</td>
            <td width="3%">scroll 2F</td>
            <td width="9%" colspan="4">scroll 2G</td>
            <td width="7%" colspan="2">scroll 2H</td>
            <td width="3%">scroll 2I</td>
            <td width="9%" colspan="4">scroll 2J</td>
            <td width="7%" colspan="2">scroll 2K</td>
            <td width="3%">scroll 2L</td>
            <td width="9%" colspan="4">scroll 2M</td>
            <td width="7%" colspan="2">scroll 2N</td>
            <td width="3%">scroll 2O</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>1 1 1 1 1 A</td>
            <td>2 2 2 2 2 A</td>
            <td>3 3 3 3 3 A</td>
            <td>4 4 4 4 4 A</td>
            <td>1 B</td>
            <td>2 B</td>
            <td >1 C</td>
            <td>1 D</td>
            <td>2 D</td>
            <td>3 D</td>
            <td>4 D<br>more...</td>
            <td>1 E</td>
            <td>2 E</td>
            <td >1 F</td>
            <td>1 1 1 G</td>
            <td>2 2 G</td>
            <td>3 G</td>
            <td>4 4 4 4 G</td>
            <td>1 H</td>
            <td>222 H</td>
            <td >1 I</td>
            <td>1 J</td>
            <td>2 J</td>
            <td>3 J</td>
            <td>4 J</td>
            <td>1 K</td>
            <td>2 2 K<br>more..<br>more..</td>
            <td >1 L</td>
            <td>1 M</td>
            <td>22 M</td>
            <td>333 M</td>
            <td>4444 M</td>
            <td>1 N</td>
            <td>2 N</td>
            <td >1 1 1 1 1 1 1 O</td>
        </tr>
        <tr>
            <td colspan="2">fixed 3</td>
            <td>3</td>
            <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
            <td>1 B</td><td>2 B</td>
            <td >1 C</td>
            <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
            <td>1 E</td><td>2 E</td>
            <td >1 F</td>
            <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
            <td>1 H</td><td>222 H</td>
            <td >1 I</td>
            <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
            <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
            <td >1 L</td>
            <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
            <td>1 N</td><td>2 N</td>
            <td >1 1 1 1 1 1 1 O</td>
        </tr>
        <tr>
            <td colspan="3">fixed 4</td>
            <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
            <td>1 B</td><td>2 B</td>
            <td >1 C</td>
            <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...<br>more...<br>more...<br>more...</td>
            <td>1 E</td><td>2 E</td>
            <td >1 F</td>
            <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
            <td>1 H</td><td>222 H</td>
            <td >1 I</td>
            <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
            <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
            <td >1 L</td>
            <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
            <td>1 N</td><td>2 N</td>
            <td >1 1 1 1 1 1 1 O</td>
        </tr>
        <tr>
            <td colspan="3">fixed 5</td>
            <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
            <td>1 B</td><td>2 B</td>
            <td >1 C</td>
            <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
            <td>1 E</td><td>2 E</td>
            <td >1 F</td>
            <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
            <td>1 H</td><td>222 H<br>H<br>H<br>H<br>H</td>
            <td >1 I</td>
            <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
            <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
            <td >1 L</td>
            <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
            <td>1 N</td><td>2 N</td>
            <td >1 1 1 1 1 1 1 O</td>
        </tr>
        <tr>
            <td>6</td>
            <td>6</td>
            <td>6</td>
            <td>1 1 1 1 1 A</td><td>2 2 2 2 2 A</td><td>3 3 3 3 3 A</td><td>4 4 4 4 4 A</td>
            <td>1 B</td><td>2 B</td>
            <td >1 C</td>
            <td>1 D</td><td>2 D</td><td>3 D</td><td>4 D<br>more...</td>
            <td>1 E</td><td>2 E</td>
            <td >1 F</td>
            <td>1 1 1 G</td><td>2 2 G</td><td>3 G</td><td>4 4 4 4 G</td>
            <td>1 H</td><td>222 H</td>
            <td >1 I</td>
            <td>1 J</td><td>2 J</td><td>3 J</td><td>4 J</td>
            <td>1 K</td><td>2 2 K<br>more..<br>more..</td>
            <td >1 L</td>
            <td>1 M</td><td>22 M</td><td>333 M</td><td>4444 M</td>
            <td>1 N</td><td>2 N</td>
            <td >1 1 1 1 1 1 1 O</td>
        </tr>
    </table>
    <br />
    <!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk--><!-- static size footer junk-->
    <table border="1" width="100%" cellspacing="1" cellpadding="0" align="center">
        <tr>
        <td width="35%" align="left">footer junk left</td>
        <td >- FOOTER JUNK MIDDLE -</td>
        <td width="35%" align="right">footer junk right</td>
        </tr>
    </table>
</form>
</BODY>
</HTML>

Ответ 2

Я согласен с ответом @FedericoGiust; но так как вы попросили более подробно...

<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript"
        src="http://datatables.net/download/build/jquery.dataTables.min.js">
</script>
<script type="text/javascript"
        src="http://datatables.net/download/build/FixedColumns.min.js">
</script>
<script type="text/javascript">
  $(document).ready(function() {
    var oTable = $('#bigtable').dataTable({
        "sScrollY": "300px",  // set vertical size dynamically here
        "sScrollX": "100%",
        "bPaginate": false,
        "bFilter": false
    });
    new FixedColumns(oTable);
  });​
</script>

Вам нужно добавить строку фиктивных заголовков столбцов, чтобы Datatables справлялись с colspans.

Посмотрите на jsfiddle.

Ответ 3

Вы можете использовать DataTables

DataTables

Это потрясающий плагин jquery для таблиц, а также интересное количество дополнительных и плагинов, включая фиксированный верхний и нижний колонтитулы, сортировку столбцов, ширину переменной, фиксированную ширину, ajax и многое другое.

Ответ 4

Работает с обычными таблицами и только изменяет ячейки заголовка на месте (без удаления, копирования или вне ввода элемента таблицы). Это имеет преимущество, позволяющее любому контенту в любой ячейке любых размеров (+ позволяет динамическую модификацию этого содержимого).

Смотрите в действии: fullpage.html, overflow_scroll.html, fullpage_untouched.html.

Вертикальные и горизонтальные ячейки th должны оставаться видимыми и выровнены во время прокрутки.

Это решение не использует никаких фреймворков. Не стесняйтесь заменять существующие помощники (сдвиги прокрутки) с помощью jquery или прототипа (или любых других фреймворков).

Вы должны добавить кодовые крюки для вызова _table_make_fixed_header_reposition при динамических изменениях содержимого таблицы.

Я не тестировал это на Windows XP (где ускоренный рендеринг отсутствует во всех браузерах).

Синий фон, тень, границы и т.д. - это просто классный материал. Вы можете сделать это, как хотите, и просто создать обычную таблицу (просто добавьте стили ячеек в .DivWrapper вместо th).

<!DOCTYPE html>
<body>
    <head>
        <style>
            .TableLarge td, .TableLarge th{
                border-style: solid;
                border-width: 1px;

                border-color: #CAE3EF;

                padding: 7px;
                white-space: nowrap;
                font-family: Verdana;
                font-size: 10px;
            }

            .TableLarge{
                border-style: none;
                border-collapse: collapse;
            }

            #padding_for_test{
                height: 3000px;
                width: 9000px;
            }

        </style>
        <script type="text/javascript">
            function table_make_fixed_header(elTable, bHorizontal, bVertical, nRepositionIntervalMilliseconds, bWrappedByScrollableDiv)
            {
                if(!bHorizontal && !bVertical)
                    return;

                if(!elTable.id)
                    elTable.id="FixedVH_Headers_"+(new Date().getTime())+Math.floor(Math.random()*10000000);

                var zIndex=1;
                if(window.getComputedStyle)
                    zIndex=parseInt(window.getComputedStyle(elTable))?parseInt(window.getComputedStyle(elTable))+1:1;

                var fnSetupHeaderCell=function(elCell, zIndex)
                {
                    var elDivWrapper=document.createElement("div");

                    elDivWrapper.setAttribute("style", "-moz-box-shadow: 3px 3px 4px #aaaaaa; -webkit-box-shadow: 3px 3px 4px #aaaaaa; box-shadow: 3px 3px 4px #aaaaaa;");
                    elDivWrapper.style.zIndex=zIndex;
                    elDivWrapper.style.backgroundColor="#0000ee";
                    elDivWrapper.style.color="white";
                    elDivWrapper.style.padding="3px";

                    elDivWrapper.className="DivWrapper";
                    elDivWrapper.style.position="relative";

                    while(elCell.childNodes.length)
                        elDivWrapper.appendChild(elCell.childNodes[0]);
                    elCell.appendChild(elDivWrapper);
                };

                if(bVertical)
                    for(var r=bHorizontal?1:0; r<elTable.rows.length; r++)
                        fnSetupHeaderCell(elTable.rows[r].cells[0], zIndex);
                if(bHorizontal)
                    for(var c=bVertical?1:0; c<elTable.rows[0].cells.length; c++)
                        fnSetupHeaderCell(elTable.rows[0].cells[c], zIndex);

                _table_make_fixed_header_reposition(elTable.id, bHorizontal, bVertical, bWrappedByScrollableDiv);

                //this could be CPU intensive, depending on the number of events fired and size of the table.
                var onScrollEventHandler=function(ev){
                    _table_make_fixed_header_reposition(elTable.id, bHorizontal, bVertical, bWrappedByScrollableDiv);
                };

                var elScrollable=bWrappedByScrollableDiv?elTable.parentNode:window;
                if(elScrollable.addEventListener)
                    elScrollable.addEventListener('scroll', onScrollEventHandler, false);
                else if (elScrollable.attachEvent)
                    elScrollable.attachEvent('scroll', onScrollEventHandler);

                //this is undesired for performance reasons, hooks and event listeners are prefered instead.
                if(nRepositionIntervalMilliseconds>0)
                    setInterval("_table_make_fixed_header_reposition('"+elTable.id+"', "+(bHorizontal?"true":"false")+", "+(bVertical?"true":"false")+", "+(bWrappedByScrollableDiv?"true":"false")+")", nRepositionIntervalMilliseconds);
            }

            function _table_make_fixed_header_reposition(strTableID, bHorizontal, bVertical, bWrappedByScrollableDiv)
            {
                var elTable=document.getElementById(strTableID);

                var strLeft;
                var strTop;
                if(bWrappedByScrollableDiv)
                {
                    strLeft=Math.min(Math.max(elTable.parentNode.scrollLeft-elTable.offsetLeft+elTable.parentNode.offsetLeft, 0), elTable.offsetWidth)+"px";
                    strTop=Math.min(Math.max(elTable.parentNode.scrollTop-elTable.offsetTop+elTable.parentNode.offsetTop, 0), elTable.offsetHeight)+"px";
                }
                else
                {
                    strLeft=Math.min(Math.max(f_scrollLeft()-elTable.offsetLeft, 0), elTable.offsetWidth)+"px";
                    strTop=Math.min(Math.max(f_scrollTop()-elTable.offsetTop, 0), elTable.offsetHeight)+"px";
                }

                if(bVertical)
                    for(var r=bHorizontal?1:0; r<elTable.rows.length; r++)
                        elTable.rows[r].cells[0].childNodes[0].style.left=strLeft;
                if(bHorizontal)
                    for(var c=bVertical?1:0; c<elTable.rows[0].cells.length; c++)
                        elTable.rows[0].cells[c].childNodes[0].style.top=strTop;
            }


            //http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
            function f_scrollLeft(){
                return f_filterResults (
                    window.pageXOffset ? window.pageXOffset : 0,
                    document.documentElement ? document.documentElement.scrollLeft : 0,
                    document.body ? document.body.scrollLeft : 0
                );
            }
            function f_scrollTop() {
                return f_filterResults (
                    window.pageYOffset ? window.pageYOffset : 0,
                    document.documentElement ? document.documentElement.scrollTop : 0,
                    document.body ? document.body.scrollTop : 0
                );
            }
            function f_filterResults(n_win, n_docel, n_body) {
                var n_result = n_win ? n_win : 0;
                if (n_docel && (!n_result || (n_result > n_docel)))
                    n_result = n_docel;
                return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
            }


            //you should add an event handler for onload here
        </script>
    </head>
    <body>
        <p>
            Vertical and horizontal th cells should remain visible and aligned while scrolling.<br>
            This solution does not use any frameworks. Feel free to replace existing helpers (scroll offsets) using jquery or prototype (or any other framework).
        </p>

        <div style="width: 800px; height: 600px; overflow: scroll">
            <table class="TableLarge" id="mySpecialHugeTable">
                <tr>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                    <th>Fixed!</th>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
                <tr>
                    <th>Fixed!<br>multi-line</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>Umm...how is this done again?</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
                <tr>
                    <th>Fixed!<br>multi-line</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Umm...how is this done again?</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
                <tr>
                    <th>Fixed!<br>multi-line</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>Umm...how is this done again?</td>
                    <td>The goose is pretty.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Hello world!</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
                <tr>
                    <th>Fixed!<br>multi-line</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>Umm...how is this done again?</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Umm...how is this done again?</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
                <tr>
                    <th>Fixed!<br>multi-line</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>Umm...how is this done again?</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                    <td>This is a very short story...Real short.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>The goose is pretty.</td>
                    <td>The goose is pretty.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>The goose is pretty.</td>
                    <td>Umm...how is this done again?</td>
                    <td>Hello world!</td>
                    <td>This is a very short story...Real short.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                </tr>
                <tr>
                    <th>Fixed!</th>
                    <td>The goose is pretty.</td>
                    <td>Hello world!</td>
                    <td>Hello world!</td>
                    <td>Umm...how is this done again?</td>
                    <td>My mother has apples.</td>
                    <td>My mother has apples.</td>
                    <td>I think Javascript is some kind of Voodoo on the DOM.</td>
                    <td>This is a very short story...Real short.</td>
                </tr>
            </table>
        </div>

        <div id="padding_for_test">&nbsp;</div>

        <script type="text/javascript">
            table_make_fixed_header(document.getElementById("mySpecialHugeTable"), /*bHorizontal*/ true, /*bVertical*/ true, 1000, /*bWrappedByScrollableDiv*/ true);
        </script>
    </body>
</html>

Достаточно легко удалить некоторый CSS и сделать фиксированные ячейки идентичными прокручиваемым ячейкам. Кроме того, если вы хотите выделенную полосу прокрутки, вы можете обернуть ее прокручиваемым DIV и отрегулировать внутри _table_make_fixed_header_reposition с помощью сдвигов прокрутки DIV.

Изменить: обновленный код, чтобы сохранить заголовки как можно ближе к краю, когда таблица выходит за пределы области просмотра (опция + для выбора между вертикальными или горизонтальными заголовками или обоими). ​​

Edit2: добавлена ​​поддержка прокручиваемого DIV и сделала это по умолчанию в примере.

Ответ 5

Если вы предпочитаете не подключаться к плагину, совместите вертикальную прокрутку заголовка (CSS)

tbody{display:block;overflow-y:auto;/*+fixed height set w/jQuery etc*/}

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

$('#table-container').scroll(function() {
    var _left = $(this).scrollLeft();
    $('#table th').css('left', _left); //"stick" the first column to viewport
});

#table-container{overflow-x:scroll;/*+fixed width set*/}
thead, tbody{display:block;}    
th {position:relative;left:0;/*gets adjusted with JS above*/}

Fiddle'd here, это не касается изменения размера, чтобы соответствовать размерам браузера. Предполагая, что он будет запущен в отдельном окне, это будет довольно тривиально; если нет, и он предназначался для запуска на странице, это было бы довольно жестким, чтобы держать его незагроможденным.

Удачи.

Ответ 6

Если вы не любите использовать загруженные плагины, вы можете сделать:

Создать таблицу с только заголовком фиксированной таблицы

Создайте div с фиксированной шириной (помните ширину полосы прокрутки) и высоту и установите прокрутку Y-направления. Внутри этого div вы поместите тело таблицы.

Создайте 3-ю и последнюю таблицу и поместите таблицу под div, чтобы она выглядела как 1 большая таблица.

<table> HEADER </table>
<div><table> BODY </table></div> (div is scrollable)
<table> Foot </table>

Если вам нужно динамически менять изменения, используйте голый javascript, вам не нужно использовать jquery или другой тяжелый плагин.