Question

我试图在tr：table（trinidad）中实现这个Scrollable 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 |表）那个小提琴中提到的那个。请告诉我出了什么问题？或者有人可以帮我在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）

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

1 个答案: