为 Datatable primefaces 设置列宽

Posted 2023-02-22

【中文标题】为 Datatable primefaces 设置列宽

【英文标题】：setting Column width for Datatable primefaces

【发布时间】：2012-06-23 19:22:21

【问题描述】：

在设置数据表的列宽时需要一些帮助。但是，数据表的宽度似乎并不统一。数据表中列的宽度，似乎因列标题长度而异。请参考下面的代码。

 <p:column style="text-align: left; width:15px;" >
           <f:facet name="header">
              <h:outputText id="SalesHistoryID" value="View Sales History/Forecast"/>
           </f:facet>
           <h:commandLink  id="ForecastID" value="View"/>

在上述情况下，列标题值长度“查看销售历史/预测”似乎很大，因此列宽度似乎也根据列标题文本值扩大。您能否让我知道是否有任何方法可以实际保持列宽的一致性并且不依赖于列标题文本值。

如果列标题文本长度太大，有没有办法保持列宽的统一？请协助。提前致谢

【问题讨论】：

***.com/questions/7434203/…

【参考方案1】：

要为数据表设置列宽，请为数据表设置 resizableColumns="true" 属性，然后使用 为特定列设置宽度专栏，就是这样:)

<p:dataTable id="dataTable" var="question" value="#QuestionsMB.questionsList" rowKey="#question.id"
                        paginator="true" rows="10" selection="#QuestionsMB.selectedQuestions" 
                        paginatorTemplate="CurrentPageReport  FirstPageLink PreviousPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
                        lazy="true" rowsPerPageTemplate="10,15,50,100"
                        resizableColumns="true"
                        emptyMessage="No question found with given criteria" >
                <f:facet name="header">
                    Questions List
                </f:facet> 

                <p:column selectionMode="multiple"/> 

                <p:column id="questionHeader" >
                    <f:facet name="header">
                        <h:outputText maxlength="20" value="Question text :" />
                    </f:facet>
                    <p:commandLink value="#question.questionText" update=":questionDetailForm:display" oncomplete="questionDialog.show()"  title="View">
                        <f:setPropertyActionListener value="#question" target="#QuestionsMB.selectedQuestion" />   
                    </p:commandLink>

                </p:column>
</p:dataTable>   

【参考方案2】：

<p:dataTable id="id"  value="#bean.mainList"  var="dp" tableStyle="width:auto"  resizableColumns="true"  >

tableStyle="width:auto" , resizableColumns="true"这将有助于适应列

【讨论】：

仍然是一个有用的答案:)

【参考方案3】：

style="table-layout: fixed" 在 table 元素上是您正在寻找的。默认表格布局为“自动”，确保没有单元格小于内容。注意放不下的文字会溢出。

【讨论】：

非常感谢您的回复。我对命令按钮也有类似的问题。我已将按钮的宽度设置为固定值。但是如果按钮上的文字超过了一定的限制，那么按钮中只有部分文字是可见的。您能否建议是否有任何方法可以让按钮在指定的宽度内显示整个文本。提前致谢

完全不设置宽度会使按钮足够大以容纳其中的文本。如果您想要按钮的最小宽度（对于一些文本很少的按钮），您可以使用 min-width: *px

嗨拉斯穆斯。感谢您的回复。我仍然对列宽有一些问题，在表格元素上设置 style="table-layout: fixed" 似乎适用于 JSF 数据表。就我而言，当我尝试为 primefaces 数据表设置相同的值时，它似乎不起作用。列宽似乎取决于指定文本标签的长度。

我尝试将固定的表格布局添加到由 primefaces 生成的表格并设置列宽，它确实将列宽减小到超出适合标题的最小值。如果你检查 p:dataTables 生成的 html，它是把你在标签上设置的样式放在实际 table 上还是生成的周围 div 上？