好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Div+CSS对HTML的table表格定位用法实例

关于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表格定位用法实例的详细内容...

  阅读:21次