Fix p:dataTable width in PrimeFaces
我想固定我的数据表的宽度。
我正在使用 PrimeFaces 3.2 的 <p:dataTable> </p:dataTable>。
如何使用 css 修复 PrimeFace 的 DataTable 宽度？
我已经试过了
|
1
|
style=“table-layout: fixed; width:100px;”
|
但它不起作用
添加DataTable的完整代码
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<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> |
- 通常应该使用 style=”width:100px;”。你能发布整个 p:dataTable 的代码吗？也许您也有一些宽度大于表格宽度的列？
- @marcbaur，sajmon_d 谢谢，我已经添加了完整的代码
- 你能用HTML发布输出吗？也许小提琴会有所帮助
使用 tableStyle 代替 style.
- 我用过但还是没有生效
可能有两种可能的方法来解决或查找此问题。
.tableSize{
table-layout:fixed !important;
width:100% !important;
}
使用 styleClass=”tableSize”
我很确定你在输入和按钮表单元素的样式类上有一些最小宽度或宽度属性。
用萤火虫检查(选择其中一个输入字段并检查附加到它的样式是否有最小宽度或宽度属性)。
如果您有任何这些，请尝试删除或调整它们的大小，因为它们的宽度将被应用，无论您为它们的父(表)元素设置什么宽度。
你好
马克
- 我删除了所有输入，但仍然无法使用 css 调节数据表宽度
- 你能发布新的文件内容吗？
来源：https://www.codenong.com/14953269/
