HTML5+CSS3 表格设计（Table）

最新推荐文章于 2024-07-26 14:13:22 发布

DracoTianlong

最新推荐文章于 2024-07-26 14:13:22 发布

阅读量1.8w

点赞数 1

分类专栏： HTML 文章标签： table html5 css class border ie

本文链接：https://blog.csdn.net/dracotianlong/article/details/7772856

版权

本文探讨如何利用HTML5和CSS3的特性，为网页中的表格增添丰富的样式和交互效果，包括使用`class`进行样式划分，设置`border`实现精致边框，以及在不同浏览器（包括IE）中的兼容性解决方案。

摘要由CSDN通过智能技术生成

CSS样式：

<style>

body {
width: 600px;
margin: 40px auto;
font-family: 'trebuchet MS', 'Lucida sans', Arial;
font-size: 14px;
color: #444;
}

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: 10px;
text-align: left;
}

.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