一、摘要
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都是相等的。
页面代码:
css内容:
2.利用css搞定table单元格中内容的换行问题(css实现强制不换行/自动换行/强制换行)
overflow:hidden 隐藏
white-space:normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
css内容:
这个css可以让上面的datatable的notes列里的每个单元格里的内容自动换行。但是这个css只对firefox3.0以上的版本有用。
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都是相等的。
页面代码:
- <t:dataTable id="custLegalList" var="cl"
- value=" #{}"styleClass="outerTable"headerClass="listTable"
- footerClass="listTable"columnClasses="checkBoxStyle,custNameStyle,notesStyle"
- width="90%" cellpadding="0" cellspacing="0" rowClasses="listContentEven,listContentOdd"
- rowIndexVar="index" first="0" rows="50" rowId="#{cl.clId}" border="0" align="center">
- <t:column>
- <f:facet name="header">
- <h:outputText value="Remove" style="position:relative;left:15%"/>
- </f:facet>
- <h:selectBooleanCheckbox id="Remove" value="#{custLegal.selectLegalCustMap[cl.id]}"/>
- </t:column>
- <t:column>
- <f:facet name="header">
- <h:outputText value="Customer Name"/>
- </f:facet>
- <h:outputText id="OutCustName" name="OutCustName" value="#{cl.custName}" />
- </t:column>
- <t:column>
- <f:facet name="header">
- <h:outputText value="Notes"/>
- </f:facet>
- <h:outputText id="OutNotes" name="OutNotes" value="#{cl.notes}" escape="false"/>
- </t:column>
- </t:dataTable>
css内容:
- .outerTable{
- table-layout:fixed;
- }
- .checkBoxStyle{
- width: 10%;//doesn't work
- text-align:center;
- }
- .custNameStyle{
- width:30%;//doesn't work
- }
- .notesStyle{
- width: 60%;//doesn't work
- }
2.利用css搞定table单元格中内容的换行问题(css实现强制不换行/自动换行/强制换行)
- 强制不换行
- .div{
- white-space:nowrap;
- }
- 自动换行
- .div{
- word-wrap: break-word;
- word-break: normal;
- }
- 强制英文单词断行
- .div{
- word-break:break-all;
- }
overflow:hidden 隐藏
white-space:normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法
css内容:
- .outerTable{
- table-layout:fixed;
- }
- .checkBoxStyle{
- width: 10%;
- text-align:center;
- }
- .custNameStyle{
- width:30%;
- }
- .notesStyle{
- width: 60%;
- word-wrap: break-word;<!--这两句可以保证自动换行-->
- word-break: normal;
- }