利用CSS对dataTable进行美化

一、摘要

1.利用css固定table的列宽
2.利用css搞定table单元格中内容的换行问题（css实现强制不换行/自动换行/强制换行）

二、具体内容

1.利用css固定table的列宽

   对于<t:dataTable/>来讲，设定好了table的width值，在databale的css里加上'table-layout:fixed;' dataTable就会使每个column的width=datatable的总长度/datatable的列数（适用于firefox2.0以上版本和IE等浏览器）。
   注意：若在此基础上再设定好每个column的width值（width值最好都用百分比），想指定每个column的width，是不起作用的，每个column的width都是相等的。
页面代码：

1. <t:dataTable id="custLegalList" var="cl" 
2. value=" #{}"styleClass="outerTable"headerClass="listTable"  
   
3.  footerClass="listTable"columnClasses="checkBoxStyle,custNameStyle,notesStyle"      
   
4.   width="90%" cellpadding="0" cellspacing="0" rowClasses="listContentEven,listContentOdd"        
   
5.   rowIndexVar="index"  first="0" rows="50" rowId="#{cl.clId}" border="0" align="center">
6.     <t:column>
7.     <f:facet name="header">
8.         <h:outputText value="Remove" style="position:relative;left:15%"/>
9.     </f:facet>
10.     <h:selectBooleanCheckbox id="Remove" value="#{custLegal.selectLegalCustMap[cl.id]}"/>
11.     </t:column>
12.     <t:column>
13.     <f:facet name="header">
14.         <h:outputText value="Customer Name"/>
15.     </f:facet>
16.       <h:outputText id="OutCustName" name="OutCustName" value="#{cl.custName}" />
17.     </t:column>
18.     <t:column>
19.     <f:facet name="header">
20.         <h:outputText value="Notes"/>
21.     </f:facet>
22.       <h:outputText id="OutNotes" name="OutNotes" value="#{cl.notes}" escape="false"/>
23.     </t:column>
24. </t:dataTable>

css内容：

1. .outerTable{
2.     table-layout:fixed;
3. }
5. .checkBoxStyle{
6.     width: 10%;//doesn't work
   
7.     text-align:center;
8. }
10. .custNameStyle{
11.     width:30%;//doesn't work
    
12. }
14. .notesStyle{
15.     width: 60%;//doesn't work
    
16. }

2.利用css搞定table单元格中内容的换行问题（css实现强制不换行/自动换行/强制换行）

1. 强制不换行
2. .div{
3. white-space:nowrap;
4. }
6. 自动换行
7. .div{
8. word-wrap: break-word;
9. word-break: normal;
10. }
12. 强制英文单词断行
14. .div{
15. word-break:break-all;
16. }

overflow:hidden 隐藏
white-space：normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象

word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

css内容：

1. .outerTable{
2.     table-layout:fixed;
3. }
5. .checkBoxStyle{
6.     width: 10%;
7.     text-align:center;
8. }
10. .custNameStyle{
11.     width:30%;
12. }
14. .notesStyle{
15.     width: 60%;
16.     word-wrap: break-word;<!--这两句可以保证自动换行-->
17.         word-break: normal;
18. }

这个css可以让上面的datatable的notes列里的每个单元格里的内容自动换行。但是这个css只对firefox3.0以上的版本有用。