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

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