заголовка фиксированного, прокручивать Trinidad стол

Question

Я пытался добиться этого Scrollable table в тре: стол (Trinidad)

Я попытался их ниже, это моя страница XHMTL, где у меня есть таблица данных, которая должна быть прокручивать как сказано в приведенной выше ссылке

 <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> 

И тогда это то, что у меня есть в моем файле CSS

.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; 
} 

Я предполагаю, что проблема будет в приведенном выше CSS. Поскольку упоминаются свойства css для thead, tbody, td, tr, но, глядя на trinidad skins, я мог найти только эти три имени класса (af | column :: header-text, af | table :: content, af | table) для один из них упоминается в этой скрипке. Пожалуйста, дайте мне знать, что пошло не так? Или кто-то мог бы вам помочь мне найти правильные атрибуты CSS в таблице Тринидад для ниже HTML-атрибута CSS?

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

После долгих испытаний, вот решение. Тринидад помещает тэг в тэг тега, поэтому сначала исправить это, добавив это ниже JQuery, чтобы сделать трюк по организации их в таблице -thead/-tbody.

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

Теперь ваша таблица в ожидаемом формате, теперь вы можете следить за любыми прокруткой имеющимися подходов. Я последовал делая это CSS

.af_table_content { 
 

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

 
.af_table_content tbody, .af_table_content thead { 
 
\t display: block; \t 
 
} 
 
.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 { 
 
\t height: 30px; 
 
\t line-height: 30px; 
 
\t /* text-align: left; */ 
 
} 
 

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

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

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

И оба Jquery и CSS должны быть вызваны После вас таблица подготовлена. SO помещает их непосредственно перед тегом body на вашей странице (либо trh: html, f: view, ui: composition)