标题固定，可滚动的特立尼达表

Question

我试图在tr：table（特立尼达）中实现这个可滚动表

我在下面尝试了这些，这是我的 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 中。因为它提到了thead，tbody，td，tr的css属性，但是查看特立尼达皮肤，我只能找到这三个类名（af|column：：header-text，af|table：：content，af|table）用于该小提琴中提到的一个。请让我知道出了什么问题？或者有人能帮我在特立尼达表中为以下HTML CSS属性找到正确的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

经过长时间的试验，这是解决方案。特立尼达将 thead 放在 tbody 标签中，所以首先要补救一下，在 Jquery 下面添加这个，以完成将它们排列在表 -thead/-tbody 中的技巧。

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

现在

您的表格采用预期的格式，现在您可以遵循任何可用的可滚动方法。我随后做了这个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;
}

Jquery和CSS都应该在准备好表后调用。所以把它们放在你的页面中body标签的末尾之前（trh：html，f：view，ui：composition）