css 个性表格 |css3渐变来回转

/*添加表格线*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
border: 1px solid #ddd;
padding: 10px;
}
/*斑马线*/
tr:nth-child(even) {
background-color: #f2f2f2;
}
/*文本居中*/
td, th {
text-align: center;
}
/*鼠标悬停效果*/
tr:hover {
background-color: #ddd;
}

使用这些样式可以让您的表格更加吸引人，并使您的内容更容易阅读和理解。通过增加这些样式，您可以让您的表格更加个性化，让人们更容易注意到它。因此，如果您想要在您的网页上添加表格，确保使用表格的最佳实践和您的网站的主题：

/*隐藏表格边框*/
table {
border-collapse: collapse;
border: none;
}
/*叠加固定表头*/
thead {
position: sticky;
top: 0;
background-color: #fff;
}
/*表头特殊样式*/
thead th {
font-weight: bold;
background-color: #eee;
}
/*让表格单元格在移动端垂直布局*/
@media (max-width: 767px) {
td, th {
display: block;
}
td {
border: none;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
left: 6px;
content: attr(data-label);
text-transform: uppercase;
font-weight: bold;
}
}

在开发网页时，要为表格添加适当的样式，以使它更适应您的页面主题。以上是一些常用的CSS样式，可以帮助您呈现具有个性的表格。通过使用这些技巧，您可以使您的表格在网站中具有更高的可读性和吸引力，从而帮助您吸引更多的访问者。