关于css定位有很多 文章 讲述:
如果有一个元素div ,他的pos IT ion属性设置为absolute,那么这个div 的位置取决于其父元素中position值设置为relative的元素。如果在其父元素中没有一个元素的position值是relative、absolute、 或者 fixed,那么这个div位置将以 body位置为参考。
但是对于某些浏览器来说似乎不是每个元素都遵从这一规则,有如下一段代码
CSS Code 复制内容到剪贴板
table{&nbs p; m arg in-left : 100px ; mar gin -t op : 50px ; } td{ h ei ght : 150px ; width : 100px ; position : relative ; } td div{ height : 30px ; width : 50px ; background-color : red ; position : absolute ; left : 10px ; top : 50px ; } <table border = "1" > <tr> <td></td> <td></td> <td> <div>这是一个 position : absolute 元素</div> </td> </tr> </table>
由于div元素的 尺寸 较小, 理想 的情况是div总是在最后一个td中,但是在firefox中div并不以td为参考,而是body。
所以要实现这个效果的兼容方式是在td中添加一个能应用position:relative的元素,上述代码可以更 改为
XM L/HT ML Code 复制内容到剪贴板
< table border = "1" > < tr > < td > </ td > < td > </ td > < td > < div style = "position:relative;" < div > 这是一个position:absolute元素 </ div > </ div > </ td > </ tr > </ table >
这样就可以保证 div元素始终在td中。
table的td相对定位实例
下面我们来看一个处理td相对定位的实例,这里我们建两个table样式:table和table2
CSS Code 复制内容到剪贴板
.table,.table2 { overflow : hidden ; } .table > .header { position : relative ; height : 40px ; background-color : # 84a9cc ; } .header > .header-title { margin :0 auto ; line-height : 40px ; color : #fff ; width : 80px ; text-align : center ; font -s ize : 14px ; } .header > .header-add { background-color : #488FD2 ; color : #FFFFFF ; cursor : pointer ; height : 20px ; line-height : 20px ; padding : 10px ; position : absolute ; right right : 0; text-align : center ; top : 0; width : 45px ; } .header > .header-se Arch { background-color : #fff ; height : 30px ; line-height : 20px ; position : absolute ; right right : 80px ; text-align : center ; top : 5px ; width : 200px ; } .table > .body,.table2 > .body { border : 1px solid #BCC6D0 ;/ border-style : none solid solid solid ;/ background-color : #fff ; } .header-search > input { border : none ; border-right : 1px solid #BCC6D0 ; color : #666666 ; font-size : 14px ; height : 100%; line-height : 100%; width : 170px ; float : left ; } .header-search > .search- LOG o { float : left ; width : 29px ; height : 30px ; background : url (…/…/images/global/serachBlue.png) center no-re PE at ; } tbody > .tr { height : 20px ; line-height : 20px ; } th { dis@R_ 360 _2266@ : inline - block ; margin-right :- 3px ; } th + th { margin-left :- 3px ; } td { padding : 10px 0; display : inline - block ; margin-right : - 3px ; } td + td { margin-left : - 3px ; } tbody > .tr:nth-child(2n+1) { background-color : #e6e5e5 ; } .table2 tbody > .tr:nth-child(2n+1) { background-color : #fff ; } .ml30 { margin-left : 30px ; } .tr .checkbox { width : 20px ; border : 1px solid #BCC6D0 ; height : 20px ; cursor : pointer ; float : left ; } .tr .checkbox.selected { background-color : #488FD2 ; } .tr .checkbox > input[type=‘checkbox’] { display : none ; } table.body,table2.body { width :100%; overflow -y: auto ; } .body { margin :0; } td, td div { font-size : 14px ; text-align : center ; } .canClick { color : #2E5CB9 ; cursor : pointer ; } . BT n { background-color : #488FD2 ; color : #FFFFFF ; cursor : pointer ; font-size : 14px ; padding : 6px 10px ; } .line > .s ub mit { float : right right ; padding : 10px 25px ; } .btnPush > .tagRight { background : url ( "…/…/images/global/smallGotoRight.png" ) no-repeat scroll center center #9EC5EB ; float : left ; height : 85px ; width : 8px ; } .o pci ty5 { opacity:0.5; filter:alpha(opacity=50); } .search { background-color : #FFFFFF ; height : 30px ; line-height : 20px ; text-align : center ; width : 210px ; } .search > input { border : none ; border : 1px solid #BCC6D0 ; color : #666666 ; font-size : 14px ; height : 28px ; line-height : 100%; width : 170px ; float : left ; } .search > .search-logo { float : left ; width : 29px ; height : 30px ; background : url (…/…/images/global/searchWhite.png) center no-repeat #488FD2 ; } .tableRight { float : left ; margin-left : 20px ; width : 962px ; } .btnLeft { float : left ; } th { font-size : 14px ; font-weight : normal ; line-height : 35px ; height : 35px ; } .textl { text-align : left ; } .table2 td { border-top : 1px solid #BCC6D0 ; } .hoverTag { cursor : pointer ; position : relative ; } .titTag { min-width : 135px ; height : 50px ; display : none ; position : absolute ; } .titTag > .titTag- left , .titTag > .titTag-msg { float : right right ; } .titTag > .titTag- left { width : 15px ; height :100%; } .titTag > .titTag-msg { background-color : # fc ffe0 ; min-width : 119px ; border : 1px solid #BCC6D0 ; height : 48px ; text-align : left ; }
总结
以上是 为你收集整理的 Div+CSS对HTML的table表格定位用法实例 全部内容,希望文章能够帮你解决 Div+CSS对HTML的table表格定位用法实例 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于Div+CSS对HTML的table表格定位用法实例的详细内容...