Question

我遇到了一个问题，如下图所示：

代码如下所示，此处不仅仅是#{userData.basicInfoList}为空时的标题行：

<h:dataTable id="userData" value="#{userData.basicInfoList}" var="info"
border="1" width="100%" style="margin-top: 10px"
headerClass="headerStyle"
columnClasses="user-id, user-name, user-age, user-sex, user-address, user-phone-no">
<h:column>
    <f:facet name="header">
        <h:outputText value="id" />
    </f:facet>
    <h:outputText value="#{info.id}" />
</h:column>

<h:column>
    <f:facet name="header">
        <h:outputText value="name" />
    </f:facet>
    <h:outputText value="#{info.name}" />
</h:column>

<h:column>
    <f:facet name="header">
        <h:outputText value="age" />
    </f:facet>
    <h:outputText value="#{info.age}" />
</h:column>

<h:column>
    <f:facet name="header">
        <h:outputText value="sex" />
    </f:facet>
    <h:outputText value="#{info.sex}" />
</h:column>

<h:column>
    <f:facet name="header">
        <h:outputText value="address" />
    </f:facet>
    <h:outputText value="#{info.address}" />
</h:column>
<h:column>
    <f:facet name="header">
        <h:outputText value="phone no" />
    </f:facet>
    <h:outputText value="#{info.phoneNo}" />
</h:column>

按如下方式呈现html：

<table id="heForm:userData" border="1" style="margin-top: 10px"
width="100%">
<thead>
    <tr>
        <th class="headerStyle" scope="col">id</th>
        <th class="headerStyle" scope="col">name</th>
        <th class="headerStyle" scope="col">age</th>
        <th class="headerStyle" scope="col">sex</th>
        <th class="headerStyle" scope="col">address</th>
        <th class="headerStyle" scope="col">phone no</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
    </tr>
</tbody>

Answer 1

这是h：dataTable

的默认行为

这是

的副本

See @Balusc answer

Answer 2

最佳解决方案如下：

<h:dataTable ... styleClass="#{empty userData.basicInfoList ? 'empty' : ''}">

单独的风格：

.empty tbody td{
    border-color: rgba(0, 0, 0, 0);
}

如果jsf数据表为空，我如何只显示表头？

2 个答案: