JSF dataTable word wrap even though there's space left - jsf

Question

I have a dataTable with no width specified. Instead of automatically adjust its width it wraps the text in one of the columns. I don't know why this is happening. I'm hoping to avoid using 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>
Composite component (implementation):
<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>
Generated 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>Through The Eyes</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>Endangered Species</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;
}
The name column is the one that gets wrapped. It seems there's like one px missing for the column to be rendered correctly.

Answer 1

After some testing I found out what the problem was. In the style for the tableelement, I use padding to get the border distanced from the actual table content. Padding for the table (not td) is - as far as I understand - not supported. It worked in firefox but not in chrome.