header fixed, scrollable trinidad table

Question

I was trying to achieve this Scrollable table in tr:table (trinidad)

I have tried these below, this is my xhmtl page, where i have a data table which needs to be scrollable as said in the above link

        <tr:table width="100%" value="#{someBean.exampleList}" var="row" styleClass="scrollTable">          
        <tr:column >
            <f:facet name="header">
                <tr:outputText value="Acc num"/>
            </f:facet>
            <tr:outputText value="#{row.searchAcctNum}"/>
        </tr:column>
        <tr:column>
            <f:facet name="header">
                <tr:outputText value="Acc Country"/>
            </f:facet>
            <tr:outputText value="#{row.pymtCountryCde}"/>
        </tr:column>
        <tr:column>
            <f:facet name="header">
                <tr:outputText value="Acc Key"/>
            </f:facet>
            <tr:outputText value="#{row.custKey}"/>
        </tr:column>
        <tr:column>
            <f:facet name="header">
                <tr:outputText value="Acc Port"/>
            </f:facet>
            <tr:outputText value="#{row.port}"/>
        </tr:column>
    </tr:table>

And then this is what i have in my css file

 .scrollTable af:table {
    border-spacing: 0;
    border: 2px solid black;
}
.scrollTable af|table::content {
    border-top: 2px solid black;    
    line-height: 30px;
    height:50px;
     overflow-y: auto;
    overflow-x: hidden;
}
.scrollTable  af|column::header-text{
display: block;
    height: 30px;
}

I am guessing the problem to be in the above CSS. Because it is mentioned css properties for thead, tbody, td, tr, but looking at trinidad skins i could find only these three class names(af|column::header-text,af|table::content,af|table) for the one's referred in that fiddle. Please let me know what went wrong? Or someone could you please help me locating correct CSS attributes in Trinidad table for the below HTML CSS attribute?

 table.scroll {
    /* width: 100%; */ /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
    height: 30px;
    line-height: 30px;
    /* text-align: left; */
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
    /* width: 20%; */ /* Optional */
    border-right: 1px solid black;
    /* white-space: nowrap; */
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}

Answer 1

After long trials, here is the solution. Trinidad puts thead inside tbody tag, so first to remedy that add this below Jquery to do the trick of arranging them in table -thead / -tbody.

var $table = $("table.af_table_content");
	$table.find('tbody tr:first')     	 
	  .wrap('<thead/>')
	  .parent()
	  .prependTo($table); 

Now your table is in expected format, now you can follow any scrollable approaches available. I followed by doing this css

.af_table_content {

	border-spacing: 1;
	border: 1px solid black;
	width:80%;
}

.af_table_content tbody, .af_table_content thead {
	display: block;	
}
.af_table_content tbody tr {
table-layout:fixed;
display: inline-table;
width:80%;
}

.af_table_content thead tr {
table-layout:fixed;
display: inline-table;
width:80%;
}
.af_table_content thead tr th {
	height: 30px;
	line-height: 30px;
	/* text-align: left; */
}

.af_table_content tbody {
	height: 100px;
	overflow-y: auto;
	overflow-x: hidden;
	border-top: 1px solid black;	
	position: absolute;	
	width:80%;
}

.af_table_content tbody td,.af_table_content thead th {	
	border-right: 1px solid black;
	/* white-space: nowrap; */
}

.af_table_content tbody td:last-child,.af_table_content thead th:last-child
	{
	border-right: none;
}

And both Jquery and CSS should be called after you table is prepared. SO put them just before end of body tag in your page (either trh:html, f:view, ui:composition)