Html Primefaces数据表的可调整大小的列不'；我不能正常工作

我有一个JSF页面，其中有一个包含许多列的表。当我尝试调整列的大小时，结果非常奇怪，并且不是所有浏览器都一样

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

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

Microsoft Edge的行为与FireFox大致相同

我将PrimeFaces5.2与JSF2.2（JavaEE7）结合使用，并将GlassFish 4.1用作服务器。开发环境是NetBeans 8.0.2和捆绑的Maven 3.0.5

我提供了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-name-format {
height: 8px !important;
margin-top: 3px !important;
width: 80px;
min-width: 80px;
max-width: 200px;
}

---

请创建一个，另请参见（例如，css的相关性是什么？）。并尝试最新版本（许多内容在5.2和5.3之间固定，可以在发行列表、博客等中阅读）@Kukeltje感谢您的评论。该代码是供人们复制的完整示例。因为桌子很宽，所以有点长。我有时间时可以删除一些行。我现在不能使用5.3，我说试试5.3（只是看看是否有东西在这段时间内被修复），我没有说你应该在生产中使用它。如果它在5.2中不起作用，而在5.3中起作用，那么您可以使用5.3的源代码查看如何使用5.2中的补丁修复此问题。因为这样的事情非常复杂，没有简单的解决方案，我怀疑人们会为这样的事情创建补丁（更不用说分享了）。知道它是固定的是可以分享的知识…5.3与5.2的行为相同。我结合答案再次看了一下你的问题。它“不能正常工作”的一个最重要原因是您弄乱了datatable的css，使其可滚动。datatable有一个可滚动选项。此外，您还可以使用css定义列大小，但不建议这样做。下面的答案“修复”了你弄坏的东西。尝试从头开始，你很可能会看到它在没有css的情况下工作

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