Подтвердить что ты не робот

FireFox 4 больше не поддерживает прокручиваемое TBody - обходные пути?

Как уже упоминалось в Firefox 4 changelog, больше не будет поддерживаться прокручиваемый <tbody>.

Есть куча обходных решений - javascript или две отдельные таблицы, но ни одна из них не решает все проблемы. Javascript явно медленнее (с 600 строками, которые вы можете забыть прокрутить таблицу), а 2 таблицы будут проблематичными с шириной ячейки.

Знаете ли вы, есть ли классный способ сделать это? Мы используем jsf/facelets и теперь должны обновлять теги, начиная с хорошей идеи, было бы замечательно: -)

4b9b3361

ОТВЕТЫ

Ответ 1

Я знаю, что вы пытаетесь избежать js/отдельных реализаций таблиц, но это был единственный, который я смог найти, работавший в нескольких браузерах. Попробуйте http://www.tablefixedheader.com/. Это решение jquery и работало в моем ограниченном тестировании через IE6/IE8/FF3. (Не тестировали FF4).

Ответ 2

PrimeFaces и RichFaces имеют прокручиваемые datatable components, который извлекает новые строки с помощью ajax.

(обе библиотеки JSF-компонентов в любом случае используют jQuery под обложками)

Ответ 3

Благодаря digitaldigs от MozillaZine, я смог заставить его работать с небольшими изменениями. Исправление отлично работает для FF4, FF7 и FF11.

Надеюсь, это поможет!:)

Проблемы, 1. scrollWidth не работал у меня, поэтому пришлось пойти на offsetWidth

  • Ширина полосы прокрутки 16 пикселей также не помогла удалить ее. Вместо этого мой стиль tbody -

    .scrollContent { Переполнение-х: скрытый; Переполнение-у: прокрутка; /* Я сделал это только для Mozilla. IE будет показывать 2 полосы прокрутки, если они применяются */ Дисплей: блок; }

  • С изменением №2 мне пришлось проложить последнюю ячейку заголовка, чтобы разместить полосу прокрутки.

    /* Я сделал это только для Mozilla. Не для IE */

    .fixedHeader tr th: last-child { padding-right: 20px; }

  • В моей фиксированной таблице заголовков colspan используется много, поэтому не удалось установить ширину, поэтому я сначала ищу правильную строку с правильным количеством ячеек, а затем обрабатываю.

Мой код выглядит следующим образом:

function makeMeFixedHeader(){ 
    var tbodys = document.getElementsByName("scrollTableBody");
    if (tbodys){
        for(var i=0;i<tbodys.length;i++){
            // We can put logic here to check if the current height 
            // of tbody has crossed the specified limit or not 
            do_tbodyscroll(tbodys[i]);
        }
    }
}


function do_tbodyscroll(_tbody){
    // get the table node 
    var table = _tbody.parentNode;

    // Get the Last row in Thead ... 
    // COLGROUPS USING COLSPAN NOT YET SUPPORTED
    var thead = table.getElementsByTagName("THEAD")[0];
    var _rows = thead.getElementsByTagName("TR");
    var tableheader = _rows[_rows.length - 1];
    var headercells = tableheader.cells;

    // rows of tbody 
    var _frows = _tbody.getElementsByTagName("TR");

    // first row of tbody 
    var _fr = _tbody.getElementsByTagName("TR")[0];
    //var _fr = _tbody.getElementsByName("scrollTableRow")[0];

    // first row cells .. 
    var _frcells = _fr.cells;

    if (_frcells.length < headercells.length){
        var rowCount = 1;
        while (rowCount < _frows.length){
            // nth  row of tbody 
            _fr = _tbody.getElementsByTagName("TR")[rowCount];
            //var _fr = _tbody.getElementsByName("scrollTableRow")[rowCount];

            // nth row cells .. 
            _frcells = _fr.cells;

            if (headercells.length == _frcells.length){
                break;
            }
            rowCount++;
        }
    }

    // Apply width to header ..
    for(var i=0; i<headercells.length; i++){    
        if (tableheader.cells[i].offsetWidth != _fr.cells[i].offsetWidth){
            var lastColumn = (i == headercells.length-1)?true:false;
            var changeWidth = (lastColumn)? ((rowCount >= 1)?true:false)
                    :true;
            var headerW = tableheader.cells[i].offsetWidth;
            var cellW = _fr.cells[i].offsetWidth;

            if (headerW < cellW){
                tableheader.cells[i].width = cellW;
                _fr.cells[i].width = tableheader.cells[i].width;

                if (lastColumn)
                    tableheader.cells[i].width = tableheader.cells[i].offsetWidth-20; 

            }else{
                tableheader.cells[i].width = headerW;
                _fr.cells[i].width = tableheader.cells[i].width;

                if (lastColumn)
                    _fr.cells[i].width = tableheader.cells[i].offsetWidth-20;
            }
        }
    }

    //var j = headercells.length-1;
    // ADD 16 Pixel of scroll bar to last column ..
    //tableheader.cells[j].width =  _fr.cells[j].offsetWidth + 20;

    tableheader.style.display = "block";
    _tbody.style.display = "block"; 
}

Ответ 4

Попробуйте первый метод этой страницы, чистый CSS с одной таблицей (2 divs вокруг таблицы, а thead - абсолютный): tablescroll Кажется, для работы над FF4/IE9/IE8 в дополнение к IE7/FF3.6.

Ответ 5

Просто после того, как я обновился, меня захлопнули. Boo.

Я нашел это в трубах.

Этот код работает в FFX 4. Не в IE8... может быть изменен.

http://www.imaputz.com/cssStuff/bigFourVersion.html

Ответ 6

Почему бы не использовать прокручиваемый div? Возможно, один из этих двух вариантов:

<table>
 <row>
  <cell>
   <div of headers>
   <div of content (scrollable)>
  </cell>
 </row>
</table>

или проще:

<div of headers>
<div (scrollable)>
 <table of content, no headers>
</div>

Не очень я знаю, но эй, я не Майклэнгело:)

Ответ 7

Я работал над бездонным прототипом, который хочу поделиться с вами. Он работает в Firefox 4+, IE7-8 (не проверял 6 или 9) Safari и Chrome.

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

Для настоящего проекта я работал откровенно, я отступил от прокручиваемого тела и пошел с разбивкой на страницы. но я имел дело с 25 + столбцами с сортировкой и потенциально 1000 строк.

Во всяком случае, это то место, где я добрался до того, как покинул его. Пожалуйста, разместите свои дополнения, если вы его улучшите: Надеюсь, это поможет.

Ссылка на пример

    <!DOCTYPE html>
<html>
    <head>
        <title>Table with Fixed Header Prototype</title>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            .tableContainer{
                background:#eee;
                width:80%;
            }
            .scrollContainer{
                width:100%;
                height:500px; /** The only thing required */
            }
            .staticHeaderTable{
                -moz-box-shadow: 1px 4px 5px #cccccc;
                -webkit-box-shadow:1px 4px 5px #cccccc;
                box-shadow: 1px 4px 5px #cccccc;
                position: relative;
                z-index: 10;
            }
        /*****************************************************/
        /**** Generic styles outside of problem scope ****/

            table{border-collapse: collapse;font:normal 12px sans-serif;}
            th,td{padding:2px; height:20px;border:1px solid #dddddd;}
            th{background:#ffcc00;}
        </style>
    </head>
<body>
<script>
function makeStaticTableHeaders(tableId){
// Overall Container : wraps everything
    var tableContainer = document.createElement("div");
        tableContainer.className = "tableContainer";

// Scrolling Container : must have a height.(Set in CSSS in this sample) this contains the table without the head or foot   
    var scrollContainer = document.createElement("div");
        scrollContainer.className = "scrollContainer";
        scrollContainer.style.overflowY = "auto"; // just Y since IE7 doesn't add the scrollbar to the width.
        scrollContainer.style.overflowX = "hidden"; // IE7 override. consider a CSS fix
        scrollContainer.style.width = "100%";

// Identifies the actual table to wrap from the dom. exits if it can't be found
    var dataTable = document.getElementById(tableId);
    if(typeof(dataTable) == "undefined"){
        return false;
    }
    dataTable.style.width = "100%";

// Identify the header. If there is none, there is no point in this so exit.
    var header = dataTable.getElementsByTagName("thead");
    if (header.length == 0){
        return false;
    }
    for (var i = 0; i < header.length; i++)
    {
        if(header[i].className.indexOf("static") != -1){ 
            header = header[i];
            break; 
        }
        if(i == header.length - 1){
            header = header[i];// failsafe
        }
    }
// If we are still here, we begin the process of altering the DOM elements
    // 1. Insert the tableContainer in front of the dataTable
    dataTable.parentNode.insertBefore(tableContainer, dataTable);

    // 2. Insert the scrollContainer into the table container
    tableContainer.appendChild(scrollContainer);
    // 3. get the thead tr and create staticHeaderTable with the tr
    var headerRow = header.getElementsByTagName("tr")[header.getElementsByTagName("tr").length - 1]; // gets last tr in case there is more than one
    var staticHeaderTable = document.createElement("table");
        staticHeaderTable.className = "staticHeaderTable";
        staticHeaderTable.appendChild(header);
        staticHeaderTable.style.width = "100%";

    // 4. Put the staticHeaderTable in the scrollContanier 
    tableContainer.insertBefore(staticHeaderTable, scrollContainer);

    // 5. take the datatable out of the dom and put it in the scrollContainer
    scrollContainer.appendChild(dataTable);

    // 6. footer(optional)
    var footer = dataTable.getElementsByTagName("tfoot");
    if (footer.length > 0){
        for (var i = 0; i < footer.length; i++)
        {
            if(footer[i].className.indexOf("static") != -1){
                footer = footer[i];
                break; 
            }
            if(i == footer.length - 1){
                footer = footer[i];// failsafe
            }
        }
        // TODO: footer assumes columns are not linked to the data columns.     
        var staticFooterTable = document.createElement("table");
            staticFooterTable.className = "staticFooterTable";
            staticFooterTable.appendChild(footer);
            staticFooterTable.style.width = "100%";
            tableContainer.appendChild(staticFooterTable);
    }


    function tableResize(){
        var firsttableRow = dataTable.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0];
        var extra = headerRow.offsetWidth - firsttableRow.offsetWidth;
        var headerCells = (headerRow.getElementsByTagName("td").length > 0 )? headerRow.getElementsByTagName("td") : headerRow.getElementsByTagName("th");
        for(var i=0; i <headerCells.length;i++){
            headerCells[i].style.width = firsttableRow.getElementsByTagName("td")[i].offsetWidth + ((i==headerCells.length-1)? extra: 0) + "px";
        }
    };
    if(window.addEventListener) {window.addEventListener("resize", tableResize, false);}
    else{window.attachEvent("onresize", tableResize);}
    tableResize();
}

window.onload = function(){
    var staticTable = makeStaticTableHeaders("dataTable");
}

</script>
<h2>Datatable</h2>

    <table id="dataTable" class="dataTable">
        <thead class="static">
            <tr>
                <th>Header 1 A long One</th>
                <th>Header 2</th>
                <th>Header 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cell Content 1 All the good Stuff is in here</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>

            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>

                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>

                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>

            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>

                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>

            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>

                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>

                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>

            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>

                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>

            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>

                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>

                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>

            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>

                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>

            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>

                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>

                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>

            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>

                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>

            </tr>
            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>

                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>

                <td>And Repeat 3</td>
            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>

            <tr>
                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>

                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>

            </tr>
            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>

                <td>More Cell Content 1</td>
                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>

                <td>Even More Cell Content 3</td>
            </tr>
            <tr>
                <td>And Repeat 1</td>
                <td>And Repeat 2</td>
                <td>And Repeat 3</td>
            </tr>

            <tr>
                <td>Cell Content 1</td>
                <td>Cell Content 2</td>
                <td>Cell Content 3</td>
            </tr>
            <tr>
                <td>More Cell Content 1</td>

                <td>More Cell Content 2</td>
                <td>More Cell Content 3</td>
            </tr>
            <tr>
                <td>Even More Cell Content 1</td>
                <td>Even More Cell Content 2</td>
                <td>Even More Cell Content 3</td>

            </tr>
            <tr>
                <td>End of Cell Content 1</td>
                <td>End of Cell Content 2</td>
                <td>End of Cell Content 3</td>
            </tr>   
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Footer Is Here</td>
            </tr>
        </tfoot>
    </table>
</body> 
</html>