header 固定，可滚动特立尼达 table

Question

我试图在 tr:table（特立尼达）

我在下面尝试过这些，这是我的 xhmtl 页面，其中我有一个数据 table 需要像上面所说的那样滚动 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>

然后这就是我 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 我只能找到这三个 class 名称（af|column::header-text ,af|table::content,af|table) 对于那个 fiddle 中提到的人。请让我知道出了什么问题？或者有人可以帮助我在特立尼达 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 下面添加这个，以完成将它们安排在 table -thead / -tbody.

中的技巧

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

现在您的 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 都应该在您 table 准备好之后调用。因此，将它们放在页面正文标记的结尾之前（trh:html、f:view、ui:composition）

header 固定，可滚动特立尼达 table

header fixed, scrollable trinidad table

css

myfaces

trinidad

jsf-2