CSS 丰富的列宽：数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3512682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
column width in rich:datatable
提问by pakore
How to set the colum width for a rich:columninside a rich:datatable? The widthattribute is being ignored. See the following code:
如何设置 arich:column内部的列宽度rich:datatable？该width属性被忽略。请参阅以下代码：
<rich:column label="#{msg[result]}" width="150px">
<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>
If you render this column and veryLongTextis wider than 150px it does not break it in multiple lines. Instead, it just ignores the column width and takes as much as space needed.
如果您渲染此列并且veryLongText宽度超过 150 像素，则不会将其分成多行。相反，它只是忽略列宽并占用尽可能多的空间。
How to fix this?
如何解决这个问题？
回答by PattMauler
Try the <rich:column>'s headerClassattribute, as so:
尝试<rich:column>'sheaderClass属性，如下所示：
<rich:column headerClass="myWidth">
...
</rich:column>
Then, in your CSS (embedded or linked):
然后，在您的 CSS（嵌入或链接）中：
.myWidth {width:150px}
You may also have some contravening "white-space" CSS property coming into play somewhere, so you might want to specify the .myWidthselector as so:
您可能还会在某处使用一些违反“空白”的 CSS 属性，因此您可能希望将.myWidth选择器指定为：
.myWidth {width:150px; white-space:normal!important}
回答by Om Yadav
If you want to achieve columns with word-wrap use this one....
如果你想用自动换行来实现列，请使用这个......
<div style="overflow: hidden;width: 300px;word-wrap: break-word; ">
<h:outputText value="#{someValue}" />
</div>
It is tested on both Mozilla and IE 8.0.
它在 Mozilla 和 IE 8.0 上都经过测试。
回答by Dejell
use:
用：
style="width:150px"
style="width:150px"
or styleClass="myColumnClass"where you add in your CSS
或者styleClass="myColumnClass"您在 CSS 中添加的位置
.myColumnClass{
width: 150px;
}
回答by mohamida
you can use this:
你可以使用这个：
<rich:column width="60px">
<f:facet name="header">
<h:outputText value="#{veryLongText}" />
</f:facet>
<div style="overflow:hidden;width:60px">
<h:outputText value="#{someValue}" />
</div>
</rich:column>
