Stretch column table in Primefaces

Question

How I can prevent to stretch table when I input long text:

Screen: http://zapodaj.net/71821572f2445.jpg.html

Meyby is it possible to make the text lines stretched row horizontally?

My fragment example table:

<p:dataTable id="table" styleClass="table" value="#{userMB.allInactive}" var="inactive" paginator="true" rows="15" rowKey="#{inactive.id}" selection="#{userMB.user}" selectionMode="single" >

                    <f:facet name="header">
                        Lista kont nieaktywnych
                    </f:facet>

                    <p:column headerText="#{msg.firstName}">
                        <h:outputText value="#{inactive.firstName}" />
                    </p:column>

I tried <p:column headerText="#{msg.firstName}" width="20px"> styleClass for column: <p:column styleClass="column" headerText="#{msg.firstName}" width="20px">

.column {
    width: 20px;
}

but I do not see any change, it does not work.

Answer 1

CSS is your friend, in your case:

overflow: hidden;
word-wrap: break-word;

You should set them on the element within the table cell. If you set width, the cell will be trimmed horizontally (no stretch, words will be break no matter of word length). If you set also max-height, the line will not stretch vertically above the limit you set.

See the jsfiddle: http://jsfiddle.net/9EuRZ/1/