table的宽度,单元格内换行问题

一. 要想固定 table 的总的宽度和每列的宽度:

  1<table border="1" id="Table1" style="TABLE-LAYOUT:fixed">
  2
  3或在脚本中: 
  4
  5this.style.tableLayout = fixed 
  6
  7** HTML  **
  8
  9| 
 10
 11{ table-layout : sLayout }   
 12  
 13---|---  
 14  
 15** Scripting  **
 16
 17| 
 18
 19_ object  _ . **style.tableLayout** [ **=** sLayout ]   
 20  
 21  
 22
 23
 24可能的值: 
 25
 26sLayout 
 27
 28| 
 29
 30** String  ** 设置或获取下面的值  : 
 31
 32| 
 33
 34auto 
 35
 36| 
 37
 38缺省设置  .  列宽将设置为不可分割的最大的内容的宽度。   
 39  
 40---|---  
 41  
 42fixed 
 43
 44| 
 45
 46表的宽度和列的宽度固定,不随单元格中内容而改变 
 47
 48一.  设置了各个列的宽,没有设表的宽:表的宽度等于各个列的宽度的和 
 49
 50二.  设置了表的宽度,没有设各个列的宽度:各个列的宽度平均分配 
 51
 52三.  要是都没设置宽度:表的宽度为  100  %,各个列的宽度平均分配   
 53  
 54二.  换行问题 
 55
 56<td> 有个  attribute  叫  NOWRAP  ,可以控制每个单元格是否允许换行 
 57
 58<td nowrap="true">
 59
 60或者 
 61
 62this.noWrap = true 
 63
 64** HTML  **
 65
 66| 
 67
 68<element **nowrap**="" ...="">  
 69  
 70---|---  
 71  
 72** Scripting  **
 73
 74| 
 75
 76_ object  _ . **noWrap** [ **=** bWrap ]   
 77  
 78可能的值: 
 79
 80bWrap 
 81
 82| 
 83
 84** Boolean  ** 设置或获取一个下面的值:  . 
 85
 86| 
 87
 88false 
 89
 90| 
 91
 92缺省值  .  允许单元格的单词字符回行  .   
 93  
 94---|---  
 95  
 96true 
 97
 98| 
 99
100不允许单元格回行,除非字符中含有  ”<br/>”   
101  
102Asp.net  的  DataGrid  有个问题,它的  Column  有个属性  ItemStyle.Wrap  ,设计是当这个列的  ItemStyle.Wrap  属性为  true  时,单元格允许回行,为  false  不允许回行,可是当设置了为  false  时输出到客户端的是这样的: 
103
104<td nowrap="”nowrap”">
105
106而不是 
107
108<td nowrap="”true”">
109
110所以  ItemStyle.Wrap  属性是没有起作用的,请自己手工在  DataGrid1_ItemDataBound  事件中将不允许回行的那些单元增加个  Attribute  :  nowrap=true  。 
111
112private  void  DataGrid1_ItemDataBound(  object  sender, System.Web.UI.WebControls.DataGridItemEventArgs e) 
113
114{ 
115
116e.Item.Cells[n].Attributes.Add("  nowrap  ","  true  ") ; 
117
118} 
119
120三.  截断英文单词强行回行 
121
122上面两个方法可以把表格的宽度都固定了,每个单元是否允许回行都可以设定了,现在可能又会碰到一个问题,当允许回行的遇到比较长的英文单词,可能就超出了这个单元格的宽度,要是不把这个单词从中截断强行换行的话,这个单词的超出单元格宽的的部分将不被显示出来。所以需要在单词超出单元格长度的地方把单词强行截断回行。 
123
124可以利用  css  中的  word-break  风格来达到我们的目的: 
125
126<table border="1" id="Table1" style="TABLE-LAYOUT:fixed;word-break:break-all">
127
128或在脚本中: 
129
130this.style. wordBreak = break-all 
131
132** HTML  **
133
134| 
135
136{ word-break : sBreak }   
137  
138---|---  
139  
140** Scripting  **
141
142| 
143
144_ object  _ . **style.wordBreak** [ **=** sBreak ]   
145  
146可能的值: 
147
148sBreak 
149
150| 
151
152** String  ** 设置或获取一个下面的值: 
153
154| 
155
156normal 
157
158| 
159
160缺省值  .  允许从每个词处回行。   
161  
162---|---  
163  
164break-all 
165
166| 
167
168不管在什么位置,超过列宽时就回行。   
169  
170keep-all 
171
172| 
173
174不允许  Chinese, Japanese,  和  Korean  回行。这个功能类似与  “normal”  的非亚洲语言版本。</table></td></td></element></td></td></table>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus