html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码
今天準(zhǔn)備美化下作的一個(gè)小頁面的樣式，這個(gè)頁面就是一個(gè)表格，調(diào)取報(bào)名信息的，例如「姓名」「聯(lián)系方式」「時(shí)間」，就單獨(dú)一個(gè)頁面，不想再使用復(fù)雜的插件來實(shí)踐，就準(zhǔn)備用純CSS來定一下樣式。
檢索了下，在「蟈蟈要安靜」的博客上看到了這個(gè)樣式，使用一下，感覺挺好，就記錄一下。
首先上下效果圖：
CSS 代碼/** Table 表格樣式 **/
.qgg-table{
border-collapse: collapse;
width:100%;
border:1px solid #c6c6c6 !important;
margin-bottom:20px;
}
.qgg-table th{
border-collapse: collapse;
border-right:1px solid #c6c6c6 !important;
border-bottom:1px solid #c6c6c6 !important;
background-color:#ddeeff !important;
padding:5px 9px;
font-size:14px;
font-weight:normal;
text-align:center;
}
.qgg-table td{
border-collapse: collapse;
border-right:1px solid #c6c6c6 !important;
border-bottom:1px solid #c6c6c6 !important;
padding:5px 9px;
font-size:12px;
font-weight:normal;
text-align:center;
word-break: break-all;
}
.qgg-table tr:nth-child(odd){
background-color:#fff !important;
}
.qgg-table tr:nth-child(even){
background-color: #f8f8f8 !important;
}
table代碼
報(bào)名表單
姓名電話時(shí)間
測試138888888882020-05-16 13:04測試138777777772020-05-16 13:03測試138666666662020-05-16 13:02測試138555555552020-05-16 13:01總結(jié)
以上是生活随笔為你收集整理的html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基金评级
- 下一篇： css first-child,CSS