Прокручиваемый стол - PullRequest
Новая
       2

Прокручиваемый стол

1 голос
/ 04 июня 2010

В 2005 году Стю Николс опубликовал эту запись about с фиксированным заголовком с прокруткой строк в таблице.

Есть ли более обновленное решение этой задачи или то, что Стю написал в 2005 году, все еще считается последним?

Ответы [ 5 ]

1 голос
/ 11 февраля 2014

У меня есть хорошее решение! Попробуйте, посмотрите, сможете ли вы понять ... Это все о дисплее CSS ... 

<html>
    <head>
        <meta charset="UTF-8">
        <title>Ex Scrollable Table</title>
        <style type="text/css">

            .divScroll
            {
                display:block; 
                overflow-x: hidden; 
                overflow-y: scroll; 
                -ms-overflow-x: hidden; 
                -ms-overflow-y: scroll; 
                height: 70px;
            }            

            .Header
            {
                display:table-header-group;
            }


            .HeaderCell
            {
                text-align: left;
                display: table-cell;
            }

            .FooterCell
            {
                display: table-cell;
                text-align: left;
            }

            .Row
            {
                display:table-row;                
            }


            .Cell
            {
                display: table-cell;
            }

            .Footer
            {
                display: table-footer-group;
            }

        </style>

    </head>
    <body>
        <table>            
            <thead>
                <tr>
                    <th class="Header">
                        <div class="Row">
                            <div class="HeaderCell" style="width:140px;">Column1</div>
                            <div class="HeaderCell" style="width:90px;">Column2 </div>
                            <div class="HeaderCell" style="width:190px;">Column3</div>
                            <div class="HeaderCell" style="width:100px;">Column4</div>
                        </div>
                    </th>
                </tr> 
            </thead>
            <tbody>
                <tr>
                    <td class="divScroll">

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>


                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>


                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>

                        <div class="Row">
                            <div class="Cell" style="width:140px;">c1</div>
                            <div class="Cell" style="width:90px;">c2</div>
                            <div class="Cell" style="width:190px;">c3</div>
                            <div class="Cell" style="width:100px;">c4</div>
                        </div>


                    </td>

                </tr>                
            </tbody>
            <tfoot>
                <tr>
                    <th class="Footer">
                        <div class="Row">
                            <div class="FooterCell"  style="width:140px;">A</div>
                            <div class="FooterCell"  style="width:90px;"> B</div>
                            <div class="FooterCell"  style="width:190px;">C</div>
                            <div class="FooterCell"  style="width:100px;">D</div>
                        </div>
                    </th>                    
                </tr>
            </tfoot>    
        </table>        



    </body>
</html>
1 голос
/ 05 июня 2010

Я не знаю о вас, но мне нужны таблицы, которые могут обрабатывать динамическую ширину (и высоту). Firefox (<= 3.6) способен справиться с этим очень хорошо, и ни одна из предложенных платформ, похоже, не справляется с этим чисто. Жаль, что Firefox 3.7 удаляет эту функцию, поскольку они называют это ошибкой: </p>

https://bugzilla.mozilla.org/show_bug.cgi?id=552080

Не стесняйтесь голосовать по этому вопросу и попросите парней из Firefox пересмотреть свое решение.

1 голос
/ 04 июня 2010

Если вы используете jQuery, для этого есть хороший плагин. Вы можете найти это здесь

1 голос
/ 04 июня 2010

Это так же актуально, как существует AFAIK. В зависимости от того, какие браузеры вам нужно поддерживать, вы можете использовать CSS, чтобы прикрепить overflow: scroll к элементу tbody, но это не официально в спецификации CSS и работает только с полужесткой надежностью. Firefox, кажется, понимает это, и я верю, что Chrome также поймет, но IE игнорирует это полностью.

1 голос
/ 04 июня 2010

Второй способ - это то, как JQGrid обрабатывает прокручиваемые таблицы. Посмотрите их демо здесь . И, возможно, вместо воссоздания колеса вы хотели бы использовать их метод TableToGrid. Это возьмет html-таблицу и превратит ее в сетку, отформатированную в них.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...