html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

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

发布时间：2022-04-14 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Div+CSS对HTML的table表格定位用法实例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

CSS Code复制内容到剪贴板
  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的元素，上述代码可以更改为

XML/HTML Code复制内容到剪贴板
  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

CSS Code复制内容到剪贴板
  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.   

脚本宝典总结

以上是脚本宝典为你收集整理的Div+CSS对HTML的table表格定位用法实例全部内容，希望文章能够帮你解决Div+CSS对HTML的table表格定位用法实例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：CSSCSSHTML
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程