The resizableColumns of Primefaces data table doesn't work properly

Question

I have a JSF page which has a table with many columns. When I try to make the columns resizable, the result is very strange and is not the same for all browsers.

For FireFox, the first column ("ID" in the demonstration code) works fine. When you try to push the right boundary of the second column ("Book Name") to the left, its next column is enlaged on both sides. The rest columns only have a limited space to be enlarged.

For Chrome, the situation is more severe. The first column cannot be enlarged. The whole table width is actually shrinking when you try to enlarge the rest columns.

Microsoft Edge behaves more or less the same as FireFox.

I am using Primefaces 5.2 with JSF 2.2 (JavaEE 7) and use GlassFish 4.1 as a server. The development environment is NetBeans 8.0.2 with Bundled Maven 3.0.5.

I include the demonstration code for JSF and CSS, Does anyone know the solution, please help. Thanks in advance.

The JSF page:

    <h:head>
    <title>Data Table Format</title>                
    <h:outputStylesheet name="css/datatable-format.css"/>          
</h:head>
<h:body>
    <h:form>
        <p:dataTable styleClass="ui-datatable-hor-scroll" var="book" value="#{publishedBookView.books}" id="viewDataTable" paginator="true" rows="20"
                     paginatorTemplate="{Calendar} {RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink} {Exporters}"
                     rowsPerPageTemplate="10,20,50,100" resizableColumns="true" liveResize="true" paginatorPosition="top">
            <f:facet name="{Calendar}">
                <p:outputLabel class="header-calendar">From Date</p:outputLabel>
                <p:calendar class="header-calendar" id="fromDate" value="#{book.publishDate}" pattern="dd MMM yyyy"  readonlyInput="true">
                  <p:ajax event="dateSelect" update="viewDataTable" />
                </p:calendar>
                <p:outputLabel class="header-calendar">To Date</p:outputLabel>
                <p:calendar class="header-calendar" id="toDate" value="#{book.publishDate}" pattern="dd MMM yyyy" readonlyInput="true" >
                  <p:ajax event="dateSelect" update="viewDataTable"/>
                </p:calendar>  
            </f:facet>
            <f:facet name="{Exporters}">
              <h:commandLink>
                <p:graphicImage name="/img/excel.png" styleClass="exporter-button"/>
                <p:dataExporter type="xls" target="viewDataTable" fileName="records" />
              </h:commandLink>
              <h:commandLink>
                <p:graphicImage name="/img/csv.png" styleClass="exporter-button"/>
                <p:dataExporter type="csv" target="viewDataTable" fileName="records" />
              </h:commandLink>
            </f:facet>
            <p:column headerText="ID" class="book-id-format" sortBy="#{book.bookId}" filterBy="#{book.bookId}" filterMatchMode="contains">
                <h:outputText value="#{book.bookId}"/>
            </p:column>
            <p:column headerText="BOOK Name" class="book-name-format">
                <h:outputText value="#{book.bookName}" />
            </p:column>
            <p:column headerText="Published Date 01" class="published-date-format">
                <h:outputText value="#{book.publishDate}" />
            </p:column>                
            <p:column headerText="Published Date 02" class="published-date-format">
                <h:outputText value="#{book.publishDate}" />
            </p:column>  
            <p:column headerText="Published Date 03" class="published-date-format">
                <h:outputText value="#{book.publishDate}" />
            </p:column>                
            <p:column headerText="Published Date 04" class="published-date-format">
                <h:outputText value="#{book.publishDate}" />
            </p:column>  
            <p:column headerText="Published Date 05" class="published-date-format">
                <h:outputText value="#{book.publishDate}" />
            </p:column>                
            <p:column headerText="Published Date 06" class="published-date-format">
                <h:outputText value="#{book.publishDate}" />
            </p:column>  
            <p:column headerText="Published Date 07" class="published-date-format">
                <h:outputText value="#{book.publishDate}" />
            </p:column>                
            <p:column headerText="Published Date 08" class="published-date-format">
                <h:outputText value="#{book.publishDate}" />
            </p:column>
            <p:column headerText="Published Date 09" class="published-date-format">
                <h:outputText value="#{book.publishDate}" />
            </p:column>                
            <p:column headerText="Published Date 10" class="published-date-format">
                <h:outputText value="#{book.publishDate}" />
            </p:column>                                
        </p:dataTable>
    </h:form>
</h:body>

The CSS sheet:

.book-id-format {
height: 8px !important;
margin-top: 3px !important;
width: 180px;}

.book-name-format {
height: 8px !important;
margin-top: 3px !important;
min-width: 80px;}

.published-date-format {
height: 8px !important;
margin-top: 3px !important;
width: 80px;}

.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper{
overflow: auto;
width: auto;}

.ui-datatable.ui-widget {
font-size: 50%;}

.ui-paginator {
font-size: x-small;
width: auto;
height: 26px;}

.exporter-button {
float: right;
width: 24px;
margin-right: 5px;
background: none;}

.header-calendar {
float: left;  
margin-right: 5px;}

.ui-datepicker {  
background: white;
font-size: 70%;}

Answer 1

If you give a full difination for the column width in CSS, it may work all right:

.book-name-format {
height: 8px !important;
margin-top: 3px !important;
width: 80px;
min-width: 80px;
max-width: 200px;
}