locked
How to format the VIEW so the Table Headers do not move on scroll? RRS feed

  • Question

  • User2142845853 posted

    In a View page thats displaying a large grid of data, the table's header area would scroll with all the data, so the user has to scroll back to the top then back down again. The goal is to freeze the header in place so only the content scrolls

     <div class="wrapper">
                    <table id="table-1" class="table  large template table-bordered ">
                        <thead>
                            <tr>
                                <th style="width:190px;"> .....



     <style type="text/css">
            #header-fixed {
                ;
                top: 0px;
                display: none;
                background-color: white;
            }
    
            table {
                border-collapse: collapse;
            }
    
            thead th {
                background-color: white;
                color: black;
            }
    
            .wrapper {
                overflow-y: auto;
                height:1000px;
            }
        </style>

    At the top of the page are search textboxes and radio buttons for filtering, they must stay fixed and not move.  Then the table headers need to stay fixed and not move so only the contents can scroll.  Currently the table is a div within a div, the top header kind of stays in place then the entire thing scrolls up and disappears or gets stuck at the top, on top of other items.

    How can the table headers be fixed to the page and the contents scrollable?  having a div within a div so the inner part scrolls is tacky. It may be an HTML question but cant the right side (as it uses LEFT and RIGHT) have an area at the top thats fixed and locked in place?  Has to be responsive too

    Monday, April 27, 2020 2:04 PM

Answers

  • User1686398519 posted

    Hi,  rogersbr

    Do you mean to make the table content scroll with the page? If this is the case, please refer to the following example. If it is another requirement, can you describe it in detail?

    @{
    
        ViewBag.Title = "Fixtable";
    
        Layout = null;
    
    }
    
    <style>
    
        #left {
    
            ;
    
            right: 0;
    
            left: 0;
    
            width: 200px;
    
        }
    
        #rightbody {
    
            ;
    
            margin-right: 0;
    
            margin-left: 210px;
    
        }
    
        #rightheader {
    
            ;
    
            width: 100%;
    
            height: 50px;
    
            margin-right: 0;
    
            margin-left: 210px;
    
            background: #eee;
    
            z-index: 2;
    
            top:0;
    
        }
    
        .tableFixedTop table {
    
            border: 1px solid #ddd;
    
            border-collapse: collapse;
    
            width: 100%;
    
        }
    
        .tableFixedTop table tr,.tableFixedTop table td {
    
            border: 1px solid #ddd;
    
         }
    
        .tableFixedTop .tableHeader {
    
            ;
    
            top: 50px;
    
        }
    
        .tableFixedTop .tableHeader td {
    
            background: #eee;
    
        }
    
        .tableFixedTop .tableBody {
    
            top: 50px;
    
            margin-top: 40px;
    
        }
    
    </style>
    
    <div id="left">
    
        this is left
    
    </div>
    
    <div id="right">
    
        <div id="rightheader">
    
            this is rightheader
    
        </div>
    
        <div id="rightbody">
    
            <div class="tableFixedTop">
    
                <table class="tableHeader">
    
                    <tr>
    
                        <td width="100">ID</td>
    
                        <td width="200">tablehead1</td>
    
                        <td width="200">tablehead2</td>
    
                        <td width="200">tablehead3</td>
    
                        <td width="100">other</td>
    
                    </tr>
    
                </table>
    
                <table class="tableBody">
    
                    @for (var i = 0; i < 100; i++)
    
                    {
    
                        <tr>
    
                            <td width="100">@i</td>
    
                            <td width="200">
    
                                @i a
    
                            </td>
    
                            <td width="200">
    
                                @i b
    
                            </td>
    
                            <td width="200">
    
                                @i c
    
                            </td>
    
                            <td width="100">other</td>
    
                        </tr>
    
                    }
    
                </table>
    
            </div>
    
     
    
        </div>
    
    </div>

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 4, 2020 6:49 AM

All replies

  • User1686398519 posted

    Hi,  rogersbr

    I made an example for your needs.

    More details, you could refer to below code:

    @{
    
        ViewBag.Title = "Fixtable";
    
    }
    
    <h2>Fixtable</h2>
    
    <style>
    
        .tableFixHead {
    
            overflow-y: auto;
    
        }
    
     
    
            .tableFixHead thead th {
    
                ;
    
                background: #eee;
    
                top: 0;
    
            }
    
        </style>
    
    <div class="wrapper tableFixHead ">
    
        <table id="table-1" class="table  large template table-bordered ">
    
            <thead>
    
                <tr>
    
                    <th style="width:190px;">0</th>
    
                </tr>
    
            </thead>
    
            <tbody id="table-cont">
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
                <tr>
    
                    <th style="width:190px;">1</th>
    
                </tr>
    
            </tbody>
    
        </table>
    
    </div>
    
    @section  scripts{
    
        <script>
    
            $(document).ready(function () {
    
                $(".tableFixHead ").height($(window).height());
    
            });
    
        </script>
    
    }

    Here is the result.

    Best Regards,

    YihuiSun

     

    Tuesday, April 28, 2020 3:53 AM
  • User2142845853 posted

    Thank you!  But this is what I have for a solution and notice how there is a scroll JUST for the grid there? different from the page?  I was hoping to avoid that and have an area above the grid, and the grid header be fixed and not move, but move the page down and the table/grid contents scroll down and have it responsive to changes in display size.

    Im using <div class = Left> and Right where the left side is fixed;  is it possible to define a responsive area above the Right thats also fixed?

    Thursday, April 30, 2020 5:47 PM
  • User1686398519 posted

    Hi,  rogersbr

    Do you mean to make the table content scroll with the page? If this is the case, please refer to the following example. If it is another requirement, can you describe it in detail?

    @{
    
        ViewBag.Title = "Fixtable";
    
        Layout = null;
    
    }
    
    <style>
    
        #left {
    
            ;
    
            right: 0;
    
            left: 0;
    
            width: 200px;
    
        }
    
        #rightbody {
    
            ;
    
            margin-right: 0;
    
            margin-left: 210px;
    
        }
    
        #rightheader {
    
            ;
    
            width: 100%;
    
            height: 50px;
    
            margin-right: 0;
    
            margin-left: 210px;
    
            background: #eee;
    
            z-index: 2;
    
            top:0;
    
        }
    
        .tableFixedTop table {
    
            border: 1px solid #ddd;
    
            border-collapse: collapse;
    
            width: 100%;
    
        }
    
        .tableFixedTop table tr,.tableFixedTop table td {
    
            border: 1px solid #ddd;
    
         }
    
        .tableFixedTop .tableHeader {
    
            ;
    
            top: 50px;
    
        }
    
        .tableFixedTop .tableHeader td {
    
            background: #eee;
    
        }
    
        .tableFixedTop .tableBody {
    
            top: 50px;
    
            margin-top: 40px;
    
        }
    
    </style>
    
    <div id="left">
    
        this is left
    
    </div>
    
    <div id="right">
    
        <div id="rightheader">
    
            this is rightheader
    
        </div>
    
        <div id="rightbody">
    
            <div class="tableFixedTop">
    
                <table class="tableHeader">
    
                    <tr>
    
                        <td width="100">ID</td>
    
                        <td width="200">tablehead1</td>
    
                        <td width="200">tablehead2</td>
    
                        <td width="200">tablehead3</td>
    
                        <td width="100">other</td>
    
                    </tr>
    
                </table>
    
                <table class="tableBody">
    
                    @for (var i = 0; i < 100; i++)
    
                    {
    
                        <tr>
    
                            <td width="100">@i</td>
    
                            <td width="200">
    
                                @i a
    
                            </td>
    
                            <td width="200">
    
                                @i b
    
                            </td>
    
                            <td width="200">
    
                                @i c
    
                            </td>
    
                            <td width="100">other</td>
    
                        </tr>
    
                    }
    
                </table>
    
            </div>
    
     
    
        </div>
    
    </div>

    Here is the result.

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 4, 2020 6:49 AM