html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码
今天準備美化下作的一個小頁面的樣式，這個頁面就是一個表格，調取報名信息的，例如「姓名」「聯系方式」「時間」，就單獨一個頁面，不想再使用復雜的插件來實踐，就準備用純CSS來定一下樣式。
檢索了下，在「蟈蟈要安靜」的博客上看到了這個樣式，使用一下，感覺挺好，就記錄一下。
首先上下效果圖：
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代碼
報名表單
姓名電話時間
測試138888888882020-05-16 13:04測試138777777772020-05-16 13:03測試138666666662020-05-16 13:02測試138555555552020-05-16 13:01總結
以上是生活随笔為你收集整理的html表格美化代码,分享：记录一次使用纯CSS美化table表格的代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基金评级
- 下一篇： css first-child,CSS