如果jsf datatable为空，如何显示表头？

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

代码如下所示，当

#{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>

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

身份证件
名称
年龄
性
地址
电话号码

---

这是h:dataTable的默认行为

这是一个复制品

---

最佳解决方案如下：

<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>

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

---

右键单击空白单元格，然后单击子菜单中的“检查元素”选项，检查在空白单元格中呈现的元素。如何解决？谢谢你的回答！它帮助我解决了这个问题。我修正了BalusC的代码，现在可以用了！如果你能将我的答案标记为有效并投票，我将非常感谢它的正确性，请帮我投票改进后的解决方案，谢谢！抱歉，我的声誉不足以投票。如果是重复的，请将其标记为重复（请参见标记选项），无需将其添加为答案。如果您改进了其他问题，请将此问题标记为重复（或删除）