2023年12月6日發(作者:育英二外)

好看的table-css樣式
1.單像素邊框css表格
源代碼:
ble {
font-family: verdana,arial,sans-rif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collap: collap;
}
ble th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
ble td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
| Info Header 1 | Info Header 2 | Info Header 3 |
|---|---|---|
| Text 1A | Text 1B | Text 1C |
| Text 2A | Text 2B | Text 2C |
2.帶背景圖的CSS樣式表格
這個樣式和和上面的差不多,只是多了背景圖,的視覺上會好看不少。源代碼:
able {
font-family: verdana,arial,sans-rif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collap: collap;
}
able th {
background:#b5cfd2 url('');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
able td {
background:#dcddc0 url('');
border-width: 1px;
padding: 8px; border-style: solid;
border-color: #999999;
}
| Info Header 1 | Info Header 2 | Info Header 3 |
|---|---|---|
| Text 1A | Text 1B | Text 1C |
| Text 2A | Text 2B | Text 2C |
3. 自動換整行顏色的CSS樣式表格(需要用到JS)
這個CSS表格會自動切換每一行的顏色,這種呈現方式,在我們編輯一個數據龐大的表格時,非常好用。
源代碼:
function altRows(id){
if(mentsByTagName){
var table = mentById(id);
var rows = mentsByTagName("tr");
for(i = 0; i < ; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}el{
rows[i].className = "oddrowcolor";
}
}
}
}
=function(){
altRows('alternatecolor');
}
stable {
font-family: verdana,arial,sans-rif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collap: collap;
}
stable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
stable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;}
.evenrowcolor{
background-color:#c3dde0;
}
| Info Header 1 | Info Header 2 | Info Header 3 |
|---|---|---|
| Text 1A | Text 1B | Text 1C |
| Text 2A | Text 2B | Text 2C |
| Text 3A | Text 3B | Text 3C |
| Text 4A | Text 4B | Text 4C |
| Text 5A | Text 5B | Text 5C |
4. 鼠標懸停高亮的CSS樣式表格 (需要JS)
純CSS顯示表格高亮在IE中顯示有問題,所以這邊使用了JS來做高亮。
注意:不要定義格子的背景色。
源代碼:
able {
font-family: verdana,arial,sans-rif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collap: collap;
}
able th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
able tr {
background-color:#d4e3e5;
}
able td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
| Info Header 1 | Info Header 2 | Info Header 3 |
|---|---|---|
| Item 1A | Item 1B | Item 1C |
| Item 2A | Item 2B | Item 2C |
| Item 3A | Item 3B | Item 3C |
| Item 4A | Item 4B | Item 4C |
| Item 5A | Item 5B | Item 5C |
本文發布于:2023-12-06 16:29:53,感謝您對本站的認可!
本文鏈接:http://m.newhan.cn/zhishi/a/1701851393237652.html
版權聲明:本站內容均來自互聯網,僅供演示用,請勿用于商業和其他非法用途。如果侵犯了您的權益請與我們聯系,我們將在24小時內刪除。
本文word下載地址:好看的table-css樣式.doc
本文 PDF 下載地址:好看的table-css樣式.pdf
| 留言與評論(共有 0 條評論) |