您现在的位置是：网站首页> 编程资料编程资料

Div+CSS对HTML的table表格定位用法实例浅析Table 和 div 的简介及用法

2023-10-22 230人已围观

简介 这篇文章主要介绍了Div+CSS对HTML的table表格定位用法实例,文中讲到了CSS的定位差异问题需要的朋友可以参考下

关于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. border="1">     
  19.          
  20.              
  21.              
  22.              
  23.             
    这是一个position：absolute元素
         
  24.              
  25.          
  26.     

由于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; &#

    上一篇：css实现移动端图片文字水平居中css水平居中的各种方法总结(推荐)浅析CSS实现水平垂直同时居中的5种思路CSS实现水平居中的4种思路简要概述css三种方法实现div在浏览器水平居中css使用flexbox布局容器内多元素水平居中关于css水平居中的小小探讨

    下一篇：使用div+CSS将页脚始终控制在页面最下方的方法css三种方法实现div在浏览器水平居中一个div在浏览器水平居中的实现方法div+CSS制作类似微信对话气泡效果的实例总结EXCEL表格中的#DIV/0!等符号怎么全部当计算?让DIV水平垂直居中的两种完美方法推荐学习DIV+CSS网页布局之混合布局学习DIV+CSS网页布局之三列布局学习DIV+CSS网页布局之两列布局学习DIV+CSS网页布局之一列布局Div+CSS对HTML的table表格定位用法实例

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网