溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2021-09-15 16:22:33 來源:億速云 閱讀:245 作者:柒染 欄目:web開發

這篇文章將為大家詳細講解有關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;     
    }     
    <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的元素,上述代碼可以更改為

XML/HTML Code復制內容到剪貼板

  1. <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復制內容到剪貼板

  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(&hellip;/&hellip;/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=&lsquo;checkbox&rsquo;]   
    {   
    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("&hellip;/&hellip;/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(&hellip;/&hellip;/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表格定位就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女