JSF的dataTable自動換行，即使有剩餘空間

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

的名列是被包裹着的一個。看起來好像有一個像素缺失的列要正確呈現。

Answer 1

一些測試後，我發現了什麼問題了。在樣式爲table元素，我用padding得到邊界從實際表的內容保持距離。填充的表（未TD）是 - 據我瞭解 - 不支持。它在Firefox中工作，但不是在Chrome中。