漂亮的表格风格

这是我第一次写的文章，在校学生，分享一些前端的代码设计，废话不多说了

直接上截图

每个表格单元格都可以点击类似，这样的效果，下图

在实现一个美观的前端表格页面后，可以在通过添加js事件处理比如onblur，配合后端程序，实现一个漂亮的可供修改的表格

下面是css代码

*{
	margin: 0;
	padding: 0;
}
.title{
	width: 100%;
	height: 50px;
	font-size: 20px;
	color: #fff;
	background-color: #66ccff;
	line-height: 50px;
	text-align: center;
}

table {
	width: 100%;
	border: 1px solid #f0f0f0;
	border-collapse:collapse;
}


table tr > td{
	outline: none;
	border: none;
	height: 30px;
	min-width: 50px;
	max-width: 150px;
	overflow: hidden;
	
	border-left: .5px solid #ccc;
}
/*第一行独立设置*/
table tr:first-child{
	background-color: #aaa;
	color: #fff;
}
table  tr:nth-child(odd){
	background-color: #e0e0e0;
}

table  tr:nth-child(even){
	background-color: #ffffff;
}

input{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 3px 8px;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: 3px;
	transition: background .25s;
	margin: 1px 0px;
}
input:hover{
	border: 1px solid #fff;
	background: rgba(255,255,255,.3)
}
input:focus{
	border: none;
	box-shadow: inset #999 0px 0px 3px; 
	background: #fff;
	outline: none; 
}

伪类

hover：鼠标在目标上

focus：鼠标焦点在目标上

first-child：第一个子元素

nth-child（odd/even）：选择任意子元素

选择器基本就是标签名，就不贴HTML的标签了

怎么样很简单的css3就可以写出漂亮的页面了吧。