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

时间：2021-05-08

关于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;
  • }

  • 声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章