Div加CSS如何对HTML的table表格定位

这篇文章将为大家详细讲解有关Div加CSS如何对HTML的table表格定位，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

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

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

CSS Code复制内容到剪贴板

1. table{         margin-left: 100px;         margin-top: 50px;     }     td{         height: 150px;         width: 100px;         position: relative;     }     td div{         height: 30px;         width: 50px;         background-color: red;         position: absolute;         left: 10px;         top:50px;     }     
            
                
                
                
                    
   这是一个position：absolute元素
                
            
        

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

XML/HTML Code复制内容到剪贴板

1.          
                
                
                
                              
   这是一个position：absolute元素
                                           
            
        

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

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

CSS Code复制内容到剪贴板

1. .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-size:14px;   }   .header > .header-add   {   background-color: #488FD2;   color: #FFFFFF;   cursor: pointer;   height: 20px;   line-height: 20px;   padding: 10px;   position: absolute;   rightright: 0;   text-align: center;   top: 0;   width: 45px;   }   .header > .header-search   {   background-color: #fff;   height: 30px;   line-height: 20px;   position: absolute;   rightright: 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-logo   {   float:left;width:29px;height:30px;   background:url(…/…/images/global/serachBlue.png) center no-repeat;   }   tbody > .tr   {   height:20px;line-height:20px;   }   th   {   display: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;   }     .btn {   background-color: #488FD2;   color: #FFFFFF;   cursor: pointer;   font-size: 14px;   padding: 6px 10px;     }   .line > .submit   {   float:rightright;padding:10px 25px;   }   .btnPush > .tagRight {   background: url("…/…/images/global/smallGotoRight.png") no-repeat scroll center center #9EC5EB;   float: left;   height: 85px;   width: 8px;   }   .opcity5   {   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:rightright;   }   .titTag > .titTag-left  {   width:15px;   height:100%;   }   .titTag > .titTag-msg   {   background-color:#fcffe0;min-width:119px;border:1px solid #BCC6D0;height:48px;text-align:left;   }

关于Div加CSS如何对HTML的table表格定位就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。