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

Question

我正在努力实现这个 Scrollable table在 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 属性，但是查看 trinidad skins我只能找到这三个类名(af|column::header-text，af|table::content，af|table)作为那个 fiddle 中提到的类名。请让我知道出了什么问题？或者有人可以帮我在 Trinidad 表中为以下 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)