css固定表格titile和首列的實現

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

經過幾天的學習，稍微瞭解了些div+css的網站布局的思路和好處。
本來是confuseLing給我發來了一段代碼，實現了鎖定title和first col的css，但是在使用者體驗上並不好，我整理了一下。言歸正傳，直接說這個的實現。

test.css:

.firstRow {...}{
background-color:#CC9900;
top:expression(this.offsetParent.scrollTop);
z-index:10;
position:relative;
}
.corner {...}{
background-color:#CC9900;
z-index:10;
left:expression(this.parentElement.offsetParent.scrollLeft);
top:expression(this.offsetParent.scrollTop);
position:relative;
}
.firstCol {...}{
background-color:white;
z-index:10;
left:expression(this.parentElement.offsetParent.scrollLeft);
position:relative;
}
.relative{...}{
position:relative;
}
div {...}{
overflow:auto;
width:300px;
height:150px;
}
tr {...}{height:50px;}

test.html:

這個的使用者體驗並不好，尤其是scroll之後，畫面的邊緣有略微的毛邊，是不是可以把table border幹掉，然後每個cell 設定 cell border，可以解決這個問題，今天我是沒有空來探討啦。

另外這個css的expression並不支援最新的css2.0和html4.0標準。雖然最新的ie支援但是加上了w3c的標準後，程式像預想一樣正常運行。

這裡介紹一個軟體：

TopStyle Pro 3.0 可以檢測css是否符合w3c的web 2.0標準。
至少因為使用了expression。上述代碼無法通過web 2.0的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">標準

TopStyle Pro 3.0 試用期註冊表破解欄位為：
HKU/S-1-5-21-1177238915-1580818891-1060284298-500/Software/Microsoft/Windows/CurrentVersion/WinSHTrack

是論日算的，從那天起不知道，但是你給它加1000天，就慢慢使用吧。
使用RegShot 監測的c:/和註冊標的變化查到的這個欄位，雖然還是很討厭的會彈出試用框，但是畢竟可以長期使用了。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More