Div+CSS对HTML的table表格定位用法实例
Div+CSS对HTML的table表格定位用法实例
发布时间:2016-12-27 来源:查字典编辑
摘要:关于css定位有很多文章讲述:如果有一个元素div,他的position属性设置为absolute,那么这个div的位置取决于其父元素中po...

关于css定位有很多文章讲述:

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

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

CSS Code复制内容到剪贴板 table{ margin-left:100px; margin-top:50px; } td{ height:150px; width:100px; position:relative; } tddiv{ height:30px; width:50px; background-color:red; position:absolute; left:10px; top:50px; } <tableborder="1"> <tr> <td></td> <td></td> <td> <div>这是一个position:absolute元素</div> </td> </tr> </table>

由于div元素的尺寸较小,理想的情况是div总是在最后一个td中,但是在firefox中div并不以td为参考,而是body。

所以要实现这个效果的兼容方式是在td中添加一个能应用position:relative的元素,上述代码可以更改为

XML/HTML Code复制内容到剪贴板 <tableborder="1"> <tr> <td></td> <td></td> <td> <divstyle="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:0auto;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:1pxsolid#BCC6D0;/border-style:nonesolidsolidsolid;/background-color:#fff; } .header-search>input { border:none; border-right:1pxsolid#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)centerno-repeat; } tbody>.tr { height:20px;line-height:20px; } th { display:inline-block;margin-right:-3px; } th+th { margin-left:-3px; } td { padding:10px0;display:inline-block;margin-right:-3px; } td+td { margin-left:-3px; } tbody>.tr:nth-child(2n+1) { background-color:#e6e5e5; } .table2tbody>.tr:nth-child(2n+1) { background-color:#fff; } .ml30 { margin-left:30px; } .tr.checkbox { width:20px;border:1pxsolid#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,tddiv { font-size:14px;text-align:center; } .canClick { color:#2E5CB9;cursor:pointer; } .btn{ background-color:#488FD2; color:#FFFFFF; cursor:pointer; font-size:14px; padding:6px10px; } .line>.submit { float:rightright;padding:10px25px; } .btnPush>.tagRight{ background:url("…/…/images/global/smallGotoRight.png")no-repeatscrollcentercenter#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:1pxsolid#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)centerno-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; } .table2td { border-top:1pxsolid#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:1pxsolid#BCC6D0;height:48px;text-align:left; }

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类