四川盐亭网站制作公司

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表格定位就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


网站标题：Div加CSS如何对HTML的table表格定位
URL链接：http://scyanting.com/article/jidhod.html

其他资讯