Fixed Header Table In Tabs

Fixed Header Table In Tabs

  

Working on Service Studio 9.0.1.5

we have three tabs all three have serach button with a functionality to display data in grid .

We have implemented  outsystem fixed header plugin (http://mkoryak.github.io/floatThead/) for fixed header in table.It works good in single tab only but when we searched in another tab it get removed from another one.

for that we have applied Jquery it get strikes when we changed tab


SyntaxEditor Code Snippet

$(window).load(function(){  

$(".Tabs_Header a").click(function(){
 $('table.TableRecords').floatThead({
        scrollContainer: function($table){
            return $table.closest('.table-scroll');
        }
    });

       });
       });

with this it works fine but some time header get distorted when we move from one tab to another PFB image for the issue.


Hi Pankaj

Have you tried to use CSS instead of the Plugin?

For simple tables, you can use the following snippet of code. See the attachment with the example.


table {
    border-collapse: collapse !important; 
    table-layout: fixed;
    display: table;
    width: 800px !important;
}

thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

tbody {
    display: block;
    overflow: auto;
    width: 800px !important;
    height: 300px;
}

tbody tr {
    display: block;
}

tbody td {
    width: 33.33%;
    display: inline-block;
}


Regards