Scrollable datatable in rowExpansion - Messed up column width - primefaces

Question

I'm trying to put a scrollable datatable inside of a rowExpansion tag, but the resulting datatable comes out all weird, like this:
Code:
<p:rowExpansion>
<h:panelGrid id="display" columns="2" cellpadding="4"
styleClass="ui-widget-content"
columnClasses="label, value">
<h:outputText value="Registrerad:"/>
<h:outputText id="registered" value="#{campaignOfferGroupView.formatDate(offerGroup.registerDate)}"/>
<h:outputText value="Senast ändrad:"/>
<h:outputText id="changeDate" value="#{campaignOfferGroupView.formatDate(offerGroup.changeDate)}"/>
<h:outputText value="Ändrad av:"/>
<h:outputText id="changedBy" value="#{offerGroup.changedBy}"/>
</h:panelGrid>
<p:dataTable var="campaignCode" value="#{campaignOfferGroupView.getCampaignCodesForGroup(offerGroup.id)}"
scrollable="true" scrollHeight="120">
<f:facet name="header">
Kampanjkoder tillhörande kampanjerbjudandegruppen
</f:facet>
<p:column headerText="ID">
#{campaignCode.id}
</p:column>
<p:column headerText="Namn">
#{campaignCode.description}
</p:column>
<p:column headerText="Start">
#{campaignCode.startDate}
</p:column>
<p:column headerText="Stop">
#{campaignCode.stopDate}
</p:column>
</p:dataTable>
Anyone have any idea why this is? If I remove the scrollable attribute the table looks fine:
Incidentally, is there any way to remove the grey empty column created by a scrollable DataTable as seen in http://www.primefaces.org/showcase/ui/datatableScrolling.jsf?
EDIT: I have noticed that the ShowCase has column size fixed using the style attribute. I would rather avoid this if possible.