Div+CSS对HTML的table表格定位用法实例

关于css定位有很多文章讲述：

如果有一个元素div ，他的position属性设置为absolute，那么这个div 的位置取决于其父元素中position值设置为relative的元素。如果在其父元素中没有一个元素的position值是relative、absolute、或者fixed，那么这个div位置将以 body位置为参考。

但是对于某些浏览器来说似乎不是每个元素都遵从这一规则，有如下一段代码

1. table{     
2.     margin-left: 100px;     
3.     margin-top: 50px;     
4. }     
5. td{     
6.     height: 150px;     
7.     width: 100px;     
8.     position: relative;     
9. }     
10. td div{     
11.     height: 30px;     
12.     width: 50px;     
13.     background-color: red;     
14.     position: absolute;     
15.     left: 10px;     
16.     top:50px;     
17. }     
18. <table border="1">     
19.     <tr>     
20.         <td></td>     
21.         <td></td>     
22.         <td>     
23.             <div>这是一个position：absolute元素</div>     
24.         </td>     
25.     </tr>     
26. </table>    

由于div元素的尺寸较小，理想的情况是div总是在最后一个td中，但是在firefox中div并不以td为参考，而是body。
所以要实现这个效果的兼容方式是在td中添加一个能应用position：relative的元素，上述代码可以更改为

1. <table border="1">     
2.     <tr>     
3.         <td></td>     
4.         <td></td>     
5.         <td>     
6.                       <div style="position:relative;"     
7.             <div>这是一个position：absolute元素</div>     
8.                       </div>     
9.         </td>     
10.     </tr>     
11. </table>    

这样就可以保证 div元素始终在td中。

table的td相对定位实例
下面我们来看一个处理td相对定位的实例，这里我们建两个table样式：table和table2

1. .table,.table2   
2. {   
3. overflow:hidden;   
4.   
5. }   
6. .table > .header   
7. {   
8. position:relative;   
9. height:40px;   
10. background-color:#84a9cc;   
11. }   
12. .header > .header-title   
13. {   
14. margin:0 auto;line-height:40px;color:#fff;width:80px;text-align: center;font-size:14px;   
15. }   
16. .header > .header-add   
17. {   
18. background-color: #488FD2;   
19. color: #FFFFFF;   
20. cursor: pointer;   
21. height: 20px;   
22. line-height: 20px;   
23. padding: 10px;   
24. position: absolute;   
25. rightright: 0;   
26. text-align: center;   
27. top: 0;   
28. width: 45px;   
29. }   
30. .header > .header-search   
31. {   
32. background-color: #fff;   
33. height: 30px;   
34. line-height: 20px;   
35. position: absolute;   
36. rightright: 80px;   
37. text-align: center;   
38. top: 5px;   
39. width: 200px;   
40. }   
41. .table > .body,.table2 > .body   
42. {   
43. border: 1px solid #BCC6D0;/border-style:none solid solid solid;/background-color:#fff;   
44. }   
45. .header-search > input   
46. {   
47. border:none;   
48. border-right: 1px solid #BCC6D0;   
49. color: #666666;   
50. font-size: 14px;   
51. height: 100%;   
52. line-height: 100%;   
53. width: 170px;   
54. float:left;   
55. }   
56. .header-search > .search-logo   
57. {   
58. float:left;width:29px;height:30px;   
59. background:url(…/…/images/global/serachBlue.png) center no-repeat;   
60. }   
61. tbody > .tr   
62. {   
63. height:20px;line-height:20px;   
64. }   
65. th   
66. {   
67. display:inline-block;margin-right:-3px;   
68. }   
69. th + th   
70. {   
71. margin-left:-3px;   
72. }   
73. td   
74. {   
75. padding:10px 0;display: inline-block;margin-right: -3px;   
76. }   
77. td + td   
78. {   
79. margin-left: -3px;   
80. }   
81. tbody > .tr:nth-child(2n+1)   
82. {   
83. background-color:#e6e5e5;   
84. }   
85. .table2 tbody > .tr:nth-child(2n+1)   
86. {   
87. background-color:#fff;   
88. }   
89. .ml30   
90. {   
91. margin-left:30px;   
92. }   
93. .tr  .checkbox   
94. {   
95. width:20px;border:1px solid #BCC6D0;height:20px;cursor:pointer;float:left;   
96. }   
97. .tr  .checkbox.selected   
98. {   
99. background-color:#488FD2;   
100. }   
101. .tr  .checkbox > input[type=‘checkbox’]   
102. {   
103. display:none;   
104. }   
105. table.body,table2.body   
106. {   
107. width:100%;   
108. overflow-y:auto;   
109. }   
110. .body   
111. {   
112. margin:0;   
113. }   
114. td, td div   
115. {   
116. font-size:14px;text-align: center;   
117. }   
118. .canClick   
119. {   
120. color:#2E5CB9;cursor:pointer;   
121. }   
122.   
123. .btn {   
124. background-color: #488FD2;   
125. color: #FFFFFF;   
126. cursor: pointer;   
127. font-size: 14px;   
128. padding: 6px 10px;   
129.   
130. }   
131. .line > .submit   
132. {   
133. float:rightright;padding:10px 25px;   
134. }   
135. .btnPush > .tagRight {   
136. background: url("…/…/images/global/smallGotoRight.png") no-repeat scroll center center #9EC5EB;   
137. float: left;   
138. height: 85px;   
139. width: 8px;   
140. }   
141. .opcity5   
142. {   
143. opacity:0.5;   
144. filter:alpha(opacity=50);   
145. }   
146.   
147. .search {   
148. background-color: #FFFFFF;   
149. height: 30px;   
150. line-height: 20px;   
151.   
152. text-align: center;   
153. width: 210px;   
154. }   
155. .search > input   
156. {   
157. border:none;   
158. border: 1px solid #BCC6D0;   
159. color: #666666;   
160. font-size: 14px;   
161. height: 28px;   
162. line-height: 100%;   
163. width: 170px;   
164. float:left;   
165. }   
166. .search > .search-logo   
167. {   
168. float:left;width:29px;height:30px;   
169. background:url(…/…/images/global/searchWhite.png) center no-repeat #488FD2;   
170. }   
171. .tableRight   
172. {   
173. float:left;margin-left:20px;width: 962px;   
174. }   
175. .btnLeft   
176. {   
177. float:left;   
178. }   
179.   
180. th {   
181. font-size: 14px;   
182. font-weight: normal;   
183. line-height: 35px;   
184. height:35px;   
185. }   
186. .textl {   
187. text-align: left;   
188. }   
189. .table2 td   
190. {   
191. border-top:1px solid #BCC6D0;   
192. }   
193. .hoverTag   
194. {   
195. cursor:pointer;position: relative;   
196. }   
197. .titTag   
198. {   
199. min-width:135px;height:50px;display:none;position:absolute;   
200. }   
201. .titTag > .titTag-left, .titTag > .titTag-msg   
202. {   
203. float:rightright;   
204. }   
205. .titTag > .titTag-left  
206. {   
207. width:15px;   
208. height:100%;   
209. }   
210. .titTag > .titTag-msg   
211. {   
212. background-color:#fcffe0;min-width:119px;border:1px solid #BCC6D0;height:48px;text-align:left;   
213. }   
214.