Fix p:dataTable 在 PrimeFaces 中的宽度

Fix p:dataTable width in PrimeFaces

我想固定我的数据表的宽度。

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

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

我已经试过了

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

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

但它不起作用

添加DataTable的完整代码

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

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

使用 tableStyle 代替 style.

可能有两种可能的方法来解决或查找此问题。

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

.tableSize{

table-layout:fixed !important;

width:100% !important;

}

使用 style

---

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

用萤火虫检查(选择其中一个输入字段并检查附加到它的样式是否有最小宽度或宽度属性)。

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

你好

马克

---