Question

我想修复数据表的宽度。

我正在使用PrimeFaces 3.2的<p:dataTable> </p:dataTable>。

如何使用css修复PrimeFace的DataTable宽度？

我已经尝试了

style="table-layout: fixed; width:100px;"

但它不起作用

添加DataTable的完整代码

 <p:dataTable id="eventTbl" var="e" value="#{eventBean.eventList}" style="table-layout: fixed; width:100px;"
    paginator="true" rows="20" lazy="true"
    paginatorTemplate=" {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
    dynamic="true">
    <p:column>
        <p:commandButton id="selectButton" update=":form:display"
            action="#{eventBean.getEventDetails(e.eventNum)}"
            oncomplete="eventDialog.show()" icon="ui-icon-search"
            title="View">
        </p:commandButton>
    </p:column>
    <p:column headerText="Event Type" filterBy="#{e.eventType}">
        <h:outputText value="#{e.eventType}" />
    </p:column>
    <p:column headerText="Order Id" filterBy="#{e.orderId}">
        <h:outputText value="#{e.orderId}" />
    </p:column>
    <p:column headerText="Status" filterBy="#{tr.status}">
        <h:outputText value="#{tr.status}" />
    </p:column>
    <p:column headerText="Event Date" filterBy="#{e.eventDate}">
        <h:outputText value="#{e.eventDate}" />
    </p:column>
    <p:column headerText="Event Number" filterBy="#{e.eventNum}">
        <h:outputText value="#{e.eventNum}" />
    </p:column>
    <p:column headerText="Request Number" filterBy="#{e.requestNum}">
        <h:outputText value="#{e.requestNum}" />
    </p:column>
    <p:column headerText="Masked Pan" filterBy="#{e.maskedPan}">
        <h:outputText value="#{e.maskedPan}" />
    </p:column>
    <p:column headerText="Card Name" filterBy="#{e.cardName}">
        <h:outputText value="#{e.cardName}" />
    </p:column>
    <p:column headerText="Reference Number" filterBy="#{e.refNumb}">
        <h:outputText value="#{e.refNumb}" />
    </p:column>
</p:dataTable>

Answer 1

使用tableStyle而不是样式。

Answer 2

我很确定你在输入和按钮形式元素的样式类上有一些最小宽度或宽度属性。

使用firebug检查（选择其中一个输入字段并检查附加到它的样式以获得最小宽度或宽度属性）。

如果您有任何这些，请尝试删除或调整它们，因为它们的宽度将被应用，无论您为其父（表）元素设置的宽度。

电贺马克

Answer 3

可能有两种方法可以解决或发现此问题。

请检查您是否已将colspan大小用于数据表。例如，如果表单colspan大小为10，请确保在数据表中提到colspan大小为10。
使用styleClass代替样式或继承值，如下所示

.tableSize{ table-layout:fixed !important; width:100% !important; }

使用styleClass =“tableSize”

在PrimeFaces中修复p：dataTable宽度

3 个答案: