本文给大家介绍一个漂亮的CSS价格表格，它与其他表格的不同在于，它最后一行是汇总行，在背景颜色和文字大小上要有所突出。
CSS价格表格
HTML代码html>
TableV01
*{
margin:0px;
padding:0px;
box-sizing:border-box;
}
body,html{
height:100%;
font-family:sans-serif;
}
table{
font-family:"HelveticaNeue",Helvetica,sans-serif;
margin:0auto;
margin-top:30px;
}
caption{
text-align:left;
color:silver;
font-weight:bold;
text-transform:uppercase;
padding:5px;
}
thead{
background:SteelBlue;
color:white;
}
th,
td{
padding:5px10px;
}
tbodytr:nth-child(even){
background:WhiteSmoke;
}
tbodytrtd:nth-child(2){
text-align:center;
}
tbodytrtd:nth-child(3),
tbodytrtd:nth-child(4){
text-align:right;
font-family:monospace;
}
tfoot{
background:SeaGreen;
color:white;
text-align:right;
}
tfoottrth:last-child{
font-family:monospace;
}
项目数量价格总价
帐篷1$279.00$279.00睡袋2$159.95$319.90露营椅2$39.50$79.00总计$667.90
代码分析
下面CSS代码是定义表格头部的背景和文字颜色。thead{
background:SteelBlue; /* 背景颜色 */
color:white; /* 文字颜色 */
}
下面CSS代码是定义表格最后一行的背景和文字颜色。tfoot{
background:SeaGreen; /* 背景颜色 */
color:white; /* 文字颜色 */
text-align:right; /* 文字靠右对齐 */
}
相关文章
