table的HTML5+css3的可用样式

最新推荐文章于 2023-10-14 07:00:00 发布

南京煜之隆

最新推荐文章于 2023-10-14 07:00:00 发布

阅读量4.4k

点赞数

分类专栏： html 文章标签： html5+ css3

本文链接：https://blog.csdn.net/responsecool/article/details/42342347

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

table {  
*border-collapse: collapse; /* IE7 and lower */  
border-spacing: 0;  
width: 100%;  
}  
.bordered {  
border: solid #ccc 1px;  
-moz-border-radius: 6px;  
-webkit-border-radius: 6px;  
border-radius: 6px;  
-webkit-box-shadow: 0 1px 1px #ccc;  
-moz-box-shadow: 0 1px 1px #ccc;  
box-shadow: 0 1px 1px #ccc;  
}  
  
.bordered tr:hover {  
background: #fbf8e9;  
-o-transition: all 0.1s ease-in-out;  
-webkit-transition: all 0.1s ease-in-out;  
-moz-transition: all 0.1s ease-in-out;  
-ms-transition: all 0.1s ease-in-out;  
transition: all 0.1s ease-in-out;  
}  
  
.bordered td, .bordered th {  
border-left: 1px solid #ccc;  
border-top: 1px solid #ccc;  
padding:3px;/*供修改*/
text-align: center;/*供修改*/  
}  
  
.bordered th {  
background-color: #dce9f9;  
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));  
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: linear-gradient(top, #ebf3fc, #dce9f9);  
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
border-top: none;  
text-shadow: 0 1px 0 rgba(255,255,255,.5);  
}  
  
.bordered td:first-child, .bordered th:first-child {  
border-left: none;  
}  
  
.bordered th:first-child {  
-moz-border-radius: 6px 0 0 0;  
-webkit-border-radius: 6px 0 0 0;  
border-radius: 6px 0 0 0;  
}  
  
.bordered th:last-child {  
-moz-border-radius: 0 6px 0 0;  
-webkit-border-radius: 0 6px 0 0;  
border-radius: 0 6px 0 0;  
}  
  
.bordered th:only-child{  
-moz-border-radius: 6px 6px 0 0;  
-webkit-border-radius: 6px 6px 0 0;  
border-radius: 6px 6px 0 0;  
}  
  
.bordered tr:last-child td:first-child {  
-moz-border-radius: 0 0 0 6px;  
-webkit-border-radius: 0 0 0 6px;  
border-radius: 0 0 0 6px;  
}  
  
.bordered tr:last-child td:last-child {  
-moz-border-radius: 0 0 6px 0;  
-webkit-border-radius: 0 0 6px 0;  
border-radius: 0 0 6px 0;  
}  




			<table class="bordered">
				<thead>
					<tr>
						<th>编号（ID）</th>
						<th>账号（USERNAME）</th>
						<th>创建时间（CREATETIME）</th>
						<th>最近登录时间（LASTLOGINTIME）</th>
						<th>管理操作（OPERATION）</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>					
						<td>15150665505</td>					
						<td>2014-12-12 12:12:12</td>					
						<td>2015-01-01 12:12:12</td>					
						<td>
							<input type="button" value="修改">
							<input type="button" value="启动">
							<input type="button" value="删除">
						</td>					
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="5">亲爱的BOSS，您目前已有下一级管理员1位哦！</td>
					</tr>
				</tfoot>
			</table>