1. 设置表格边框和间距：
table {
border-collapse: collapse; /* 合并边框，使表格边框一致 */
width: 100%; /* 设置表格宽度为100% */
}
th, td {
border: 1px solid #ddd; /* 设置单元格边框 */
padding: 8px; /* 设置单元格内边距 */
text-align: left; /* 设置文本左对齐 */
}
2. 设置表头背景颜色和文本颜色：
th {
background-color: #f2f2f2; /* 设置表头背景颜色 */
color: #333; /* 设置表头文本颜色 */
}
3. 设置奇偶行背景颜色：
tr:nth-child(even) {
background-color: #f9f9f9; /* 设置偶数行背景颜色 */
}
4. 悬停效果：
tr:hover {
background-color: #f5f5f5; /* 鼠标悬停时设置行背景颜色 */
}
5. 设置表格宽度和文字截断：
table {
table-layout: fixed; /* 固定表格宽度 */
}
td {
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分以省略号显示 */
}
6. 设置表格标题：
caption {
font-size: 1.2em; /* 设置标题字体大小 */
font-weight: bold; /* 设置标题字体粗细 */
padding: 10px; /* 设置标题内边距 */
}
这些样式是常见的表格样式设置，你可以根据具体需求进行调整和修改。
转载请注明出处：http://www.pingtaimeng.com/article/detail/12526/CSS