Question

我有一个没有指定宽度的dataTable。它不是自动调整宽度，而是将文本包装在其中一列中。我不知道为什么会这样。我希望避免使用white-space: nowrap;

XHTML：

<ez:listTable
    listBean="#{artistBean}"
    actionBean="#{albumBean}"
    editable="#{artistBean.moderatedByUser}"
    title="albums"
    info="You need to be moderator to edit albums">

    <h:column>
        <f:facet name="header">name</f:facet>
        <h:link
            outcome="album"
            styleClass="tableLink"
            value="#{item.name}">
            <f:param name="albumId" value="#{item.id}" />
            <f:param name="albumName" value="#{item.name}" />
        </h:link>
    </h:column>

    <h:column>
        <f:facet name="header">year</f:facet>
        <h:outputText value="#{item.year}" styleClass="tableItem" />
    </h:column>

</ez:listTable>

复合组件（实现）：

    <cc:implementation>
    <div id="#{cc.clientId}">

        <h:outputStylesheet name="tableBase.css" library="css/table" />
        <h:outputStylesheet name="tableContent.css" library="css/table" />

        <h:panelGrid columns="2" cellpadding="0" cellspacing="0">
            <h:outputText value="#{cc.attrs.title}" styleClass="#{cc.attrs.titleClass}" />
            <h:panelGroup rendered="#{cc.attrs.showInfo}">
                <h:graphicImage id="info" styleClass="tableInfoIcon" library="images" name="q1_9x9.png" />
                <p:overlayPanel 
                    for="info" 
                    styleClass="tableInfo" 
                    showEffect="fade" 
                    hideEffect="fade">
                    #{cc.attrs.info}
                </p:overlayPanel>
            </h:panelGroup>
        </h:panelGrid>

        <h:panelGrid columns="2" cellpadding="0" cellspacing="0">

            <h:dataTable
                id="table"
                binding="#{cc.table}"
                value="#{cc.attrs.listBean.list}"
                var="item"
                styleClass="#{cc.attrs.styleClass}"
                rowClasses="#{cc.attrs.rowClasses}"
                headerClass="#{cc.attrs.headerClass}"
                rendered="#{not empty cc.attrs.listBean.list}">

                <cc:insertChildren />

                <h:column rendered="#{cc.attrs.editable}">
                    <p:commandLink
                        action="#{cc.attrs.actionBean.checkChangeAction()}"
                        value="edit"
                        styleClass="tableLink"
                        update="@form"
                        oncomplete="#{cc.attrs.editDialogId}Wid.show();"
                        rendered="#{cc.attrs.actionBean != null}">
                        <f:actionListener binding="#{cc.attrs.actionBean.setItem(item)}" />
                    </p:commandLink>
                    <p:commandLink
                        action="#{cc.attrs.listBean.checkChangeAction()}"
                        value="edit"
                        styleClass="tableLink"
                        update="@form"
                        oncomplete="#{cc.attrs.editDialogId}Wid.show();"
                        rendered="#{cc.attrs.actionBean == null}">
                        <f:actionListener binding="#{cc.attrs.listBean.setItem(item)}" />
                    </p:commandLink>
                </h:column>
                <h:column rendered="#{cc.attrs.editable}">
                    <p:commandLink
                        action="#{cc.attrs.actionBean.delete(item)}"
                        value="delete"
                        styleClass="tableLink"
                        update="@form"
                        rendered="#{cc.attrs.actionBean != null}"/>
                    <p:commandLink
                        action="#{cc.attrs.listBean.delete(item)}"
                        value="delete"
                        styleClass="tableLink"
                        update="@form"
                        rendered="#{cc.attrs.actionBean == null}" />
                </h:column>

            </h:dataTable>

            <h:panelGroup rendered="#{empty cc.attrs.listBean.list}" styleClass="default_paragraph">
                #{cc.attrs.emptyListMsg}
            </h:panelGroup>

        </h:panelGrid>
    </div>
</cc:implementation>

生成的html：

<table id="albumForm:j_idt180:table" class="table">
<thead>
    <tr>
        <th class="tableHeader" scope="col">name</th>
        <th class="tableHeader" scope="col">year</th>
        <th class="tableHeader" scope="col"></th>
        <th class="tableHeader" scope="col"></th>
    </tr>
</thead>
<tbody>
    <tr class="tableRowOdd">
        <td><a href="/mx_mk3/faces/album.xhtml?albumId=513&amp;albumName=Through+The+Eyes" class="tableLink">Through The Eyes</a></td>
        <td><span class="tableItem">2002</span></td>
        <td><a id="albumForm:j_idt180:table:0:j_idt170" href="#" class="ui-commandlink tableLink" onclick="PrimeFaces.ab({source:'albumForm:j_idt180:table:0:j_idt170',update:'albumForm',oncomplete:function(xhr,status,args){dialogWid.show();;}});return false;">edit</a></td>
        <td><a id="albumForm:j_idt180:table:0:j_idt173" href="#" class="ui-commandlink tableLink" onclick="PrimeFaces.ab({source:'albumForm:j_idt180:table:0:j_idt173',update:'albumForm'});return false;">delete</a></td>
    </tr>
    <tr class=" tableRowEven">
        <td><a href="/mx_mk3/faces/album.xhtml?albumId=514&amp;albumName=Endangered+Species" class="tableLink">Endangered Species</a></td>
        <td><span class="tableItem">2001</span></td>
        <td><a id="albumForm:j_idt180:table:1:j_idt170" href="#" class="ui-commandlink tableLink" onclick="PrimeFaces.ab({source:'albumForm:j_idt180:table:1:j_idt170',update:'albumForm',oncomplete:function(xhr,status,args){dialogWid.show();;}});return false;">edit</a></td>
        <td><a id="albumForm:j_idt180:table:1:j_idt173" href="#" class="ui-commandlink tableLink" onclick="PrimeFaces.ab({source:'albumForm:j_idt180:table:1:j_idt173',update:'albumForm'});return false;">delete</a></td>
    </tr>
</tbody>
</table>

CSS：

.tableLink {
display: inline-block;
text-decoration: none;
padding: 3px 5px 3px 5px; 
color: #3a5776;
}

.table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
padding: 2px;
}

名称列是被包装的列。似乎有一个px缺少正确呈现的列。

Answer 1

经过一些测试，我发现了问题所在。在table元素的样式中，我使用padding来使边界与实际表格内容保持距离。对于表（不是td）的填充是 - 据我所知 - 不受支持。它在firefox中工作但不在chrome中。

即使还剩下空间，JSF dataTable自动换行

1 个答案: