這篇文章將為大家詳細(xì)講解有關(guān)Div加CSS如何對(duì)HTML的table表格定位，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
為前進(jìn)等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及前進(jìn)網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、前進(jìn)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
如果有一個(gè)元素div ，他的position屬性設(shè)置為absolute，那么這個(gè)div 的位置取決于其父元素中position值設(shè)置為relative的元素。如果在其父元素中沒有一個(gè)元素的position值是relative、absolute、或者fixed，那么這個(gè)div位置將以 body位置為參考。
但是對(duì)于某些瀏覽器來說似乎不是每個(gè)元素都遵從這一規(guī)則，有如下一段代碼
CSS Code復(fù)制內(nèi)容到剪貼板
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;
}
|
|
這是一個(gè)position：absolute元素
|
由于div元素的尺寸較小，理想的情況是div總是在最后一個(gè)td中，但是在firefox中div并不以td為參考，而是body。
所以要實(shí)現(xiàn)這個(gè)效果的兼容方式是在td中添加一個(gè)能應(yīng)用position：relative的元素，上述代碼可以更改為
XML/HTML Code復(fù)制內(nèi)容到剪貼板
|
|
這是一個(gè)position：absolute元素
|
這樣就可以保證 div元素始終在td中。
table的td相對(duì)定位實(shí)例
下面我們來看一個(gè)處理td相對(duì)定位的實(shí)例，這里我們建兩個(gè)table樣式：table和table2
CSS Code復(fù)制內(nèi)容到剪貼板
.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;
}
關(guān)于Div加CSS如何對(duì)HTML的table表格定位就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
當(dāng)前文章：Div加CSS如何對(duì)HTML的table表格定位
分享路徑：
http://weahome.cn/article/jidhod.html
重慶分公司
重慶分公司
