丰富的列宽：数据表

Posted 2023-02-23

【中文标题】丰富的列宽：数据表

【英文标题】：column width in rich:datatable

【发布时间】：2011-03-31 13:44:46

【问题描述】：

如何在 rich:datatable 内设置 rich:column 的列宽？ width 属性被忽略。见以下代码：

<rich:column label="#msg[result]" >
<f:facet name="header">
    <h:outputText value="#veryLongText"/>
</f:facet>
<h:outputText value="#someValue" /> 
<f:facet name="footer">
    <h:outputText value="#someValue" /> 
</f:facet>
</rich:column>

如果您渲染此列并且veryLongText 的宽度大于 150 像素，则不会将其分成多行。相反，它只是忽略列宽并占用所需的空间。

如何解决这个问题？

【参考方案1】：

试试<rich:column>的headerClass属性，如下：

<rich:column headerClass="myWidth">
...
</rich:column>

然后，在您的 CSS（嵌入或链接）中：

.myWidth width:150px

您可能还会在某处使用一些违反“空白”的 CSS 属性，因此您可能希望这样指定 .myWidth 选择器：

.myWidth width:150px; white-space:normal!important

【参考方案2】：

如果你想实现带有自动换行的列，请使用这个....

<div style="overflow: hidden;width: 300px;word-wrap: break-word; ">
  <h:outputText value="#someValue" />
</div>

它在 Mozilla 和 IE 8.0 上都经过测试。

【参考方案3】：

使用：

style="width:150px"

或styleClass="myColumnClass" 你在哪里添加你的 CSS

.myColumnClass
 width: 150px;

【讨论】：

不，这不起作用。列宽仍然和veryLongText一样宽。

【参考方案4】：

你可以用这个：

<rich:column >
    <f:facet name="header">
        <h:outputText value="#veryLongText" />
    </f:facet>
    <div style="overflow:hidden;width:60px">
         <h:outputText value="#someValue" />
    </div>
</rich:column>