css网页设计表格 |css3 旋转 兼容ie8

/* 表格样式 */
table {
border-collapse: collapse; /* 合并边框 */
width: 100%; /* 宽度100% */
margin: 20px 0; /* 上下间距20px */
}
th, td {
padding: 8px; /* 单元格内边距 */
text-align: left; /* 左对齐 */
border-bottom: 1px solid #ddd; /* 底部间隔线 */
}
th {
background-color: #f2f2f2; /* 表头背景色 */
color: #333; /* 表头文字颜色 */
}
/* 奇偶行交替背景色 */
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #fff;
}

这里大家先定义了表格的基本样式，首先通过border-collapse:collapse将单元格边框合并，控制表格宽度的时候可以直接用宽度为100%来实现。然后为表格中的表头和单元格设置了统一的内边距和左对齐，同时加入了底部间隔线border-bottom来区分不同内容。表头还加入了背景色和文字颜色的设置。

在基本样式定义完成之后，为了增加表格的可读性，大家还可以添加奇偶行交替的背景色。这需要使用到CSS3的伪类选择器——nth-child。其语法为：

/* 偶数行 */
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 奇数行 */
tr:nth-child(odd) {
background-color: #fff;
}

这样，大家就可以将大部分程序员最爱的黑白颜色突破一下，添加些漂亮的颜色来使表格更加美观。