純CSS美化HTML的Table - 程式人生
文章推薦指數： 80 %
純CSS美化HTML的Table ... 今天發覺一個很好的表格CSS程式碼： ... >純CSS美化HTML的Table
純CSS美化HTML的Table
阿新••發佈：2019-02-07
今天發覺一個很好的表格CSS程式碼：http://veerle-v2.duoh.com/blog/comments/a_css_styled_table
整體的CSS程式碼：
body{
font:normal11pxauto"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;
color:#4f6b72;
background:#E6EAE9;
}
a{
color:#c75f3e;
}
#mytable{
width:700px;
padding:0;
margin:0;
}
caption{
padding:005px0;
width:700px;
font:italic11px"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;
text-align:right;
}
th{
font:bold11px"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;
color:#4f6b72;
border-right:1pxsolid#C1DAD7;
border-bottom:1pxsolid#C1DAD7;
border-top:1pxsolid#C1DAD7;
letter-spacing:2px;
text-transform:uppercase;
text-align:left;
padding:6px6px6px12px;
background:#CAE8EAurl(images/bg_header.jpg)no-repeat;
}
th.nobg{
border-top:0;
border-left:0;
border-right:1pxsolid#C1DAD7;
background:none;
}
td{
border-right:1pxsolid#C1DAD7;
border-bottom:1pxsolid#C1DAD7;
background:#fff;
padding:6px6px6px12px;
color:#4f6b72;
}
td.alt{
background:#F5FAFA;
color:#797268;
}
th.spec{
border-left:1pxsolid#C1DAD7;
border-top:0;
background:#fffurl(images/bullet1.gif)no-repeat;
font:bold10px"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;
}
th.specalt{
border-left:1pxsolid#C1DAD7;
border-top:0;
background:#f5fafaurl(images/bullet2.gif)no-repeat;
font:bold10px"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif;
color:#797268;
}整體的表格程式碼：
-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
M9454LL/A
M9455LL/A
M9457LL/A
900MHzperprocessor
1GHzperprocessor
1.25GHzperprocessor
我做了點改進，使用了CSS選擇器讓奇數行，偶數行顏色不一樣： .gradientTable{ width:auto; padding:0; border-spacing:0px; } .gradientTableth{ font:bold11px"TrebuchetMS",Verdana,Arial,Helvetica,sans-serif; color:#4f6b72; border-right:1pxsolid#C1DAD7; border-bottom:1pxsolid#C1DAD7; border-top:1pxsolid#C1DAD7; letter-spacing:2px; text-transform:uppercase; text-align:left; padding:6px6px6px12px; background:#CAE8EAurl(/images/bg_header.jpg)no-repeat; } .gradientTableth.nobg{ border-top:0; border-left:0; border-right:1pxsolid#C1DAD7; background:none; } .gradientTabletd{ border-right:1pxsolid#C1DAD7; border-bottom:1pxsolid#C1DAD7; font-size:11px; padding:6px6px6px12px; color:#4f6b72; } .gradientTabletr:nth-child(odd){ background:#fff; } .gradientTabletr:nth-child(even){ background:#F5FAFA; } PythonRobotFramework使用小結 «上一篇 利用mail傳送163郵件下一篇» 相關推薦 純css美化單選按鈕
延伸文章資訊
- 1分享7款颜色的CSS表格样式美化网页表格用户体验 - CSDN博客
转载自：https://www.laozuo.org/4631.html今天老左在浏览几个海外前端博客时候，看到以下7款颜色CSS表格样式的整理还是比较好的，尤其是需要在网页中 ...
- 2純CSS美化HTML的Table - 程式人生
純CSS美化HTML的Table ... 今天發覺一個很好的表格CSS程式碼： ... <meta http-equiv="Content-Type" content="text/html; c...
- 3html table 美化,html如何用css美化表格 - CSDN博客
html用css美化表格的方法：首先创建一个HTML示例文件；然后在body中创建table表格；最后通过style标签给表格添加css样式即可。本文操作环境：Windows7 ...
- 4如何在HTML 上做表格再用CSS 美化它. 今天我們來 ... - Medium
如何在HTML 上做表格再用CSS 美化它. 今天我們來說一說怎麼作表格，我就先說一個最簡單的結構，請看下方被包覆在 <table> 內的 <tr><th><td> 的標籤， ...
- 5簡單CSS語法美化Table表格底色奇數偶數相間-2022年最推薦 ...
我們常常在網頁設計的時候，會需要使用到Table表格來排版，有時候多少需要加一點顏色來美化。今天要教大家的是僅透過簡單的CSS語法，來讓Table表格 ...
