Primefaces 数据表的 resizableColumns 不能正常工作

Question

我有一个 JSF 页面，其中有一个包含许多列的表。当我尝试使列可调整大小时，结果很奇怪，并且对于所有浏览器都不相同。

对于 FireFox，第一列（演示代码中的“ID”）可以正常工作。当您尝试将第二列（“书名”）的右边界向左推时，其下一列将在两侧展开。其余的列只有有限的空间可以放大。

对于 Chrome，情况更为严峻。第一列不能放大。当您尝试扩大其余列时，整个表格的宽度实际上正在缩小。

Microsoft Edge 的行为与 FireFox 大致相同。

我正在使用 Primefaces 5.2 和 JSF 2.2 (JavaEE 7) 并使用 GlassFish 4.1 作为服务器。开发环境是带有 Bundled Maven 3.0.5 的 NetBeans 8.0.2。

我包含JSF和CSS的演示代码，有谁知道解决方案，请帮助。提前致谢。

JSF 页面：

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

CSS 表：

.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

如果你在 CSS 中对列宽给出完整的定义，它可能会正常工作：

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