表格制作css
表格基础样式设计
使用CSS为表格添加基础样式，包括边框、间距和背景色。以下代码示例展示了如何设置表格的基本外观：
table {
border-collapse: collapse; /* 合并边框 */
width: 100%; /* 表格宽度 */
margin: 20px 0; /* 外边距 */
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 8px; /* 内边距 */
text-align: left; /* 文本对齐 */
}
th {
background-color: #f2f2f2; /* 表头背景色 */
font-weight: bold; /* 加粗字体 */
}表格悬停效果
为表格行添加悬停效果，提升用户交互体验。当鼠标悬停在行上时改变背景色：
tr:hover {
background-color: #f5f5f5; /* 悬停背景色 */
}斑马纹表格样式
使用CSS的nth-child选择器创建交替行颜色的斑马纹表格：
tr:nth-child(even) {
background-color: #f9f9f9; /* 偶数行背景色 */
}响应式表格设计
针对移动设备优化表格显示，当屏幕宽度不足时允许横向滚动：
.table-responsive {
overflow-x: auto; /* 横向滚动 */
max-width: 100%; /* 最大宽度 */
}
@media screen and (max-width: 600px) {
table {
font-size: 14px; /* 小屏幕字体调整 */
}
}表格边框样式定制
创建自定义边框样式的表格，如圆角边框和特殊颜色：
table {
border: 2px solid #4CAF50; /* 外边框 */
border-radius: 5px; /* 圆角 */
}
th {
border-bottom: 2px solid #4CAF50; /* 表头下边框 */
}表格单元格对齐方式
控制表格中不同列的对齐方式，如数字右对齐、文本居中对齐：
td.number {
text-align: right; /* 数字右对齐 */
}
td.center {
text-align: center; /* 文本居中对齐 */
}表格固定表头
创建可滚动表格体同时保持表头固定的效果：
.table-fixed {
height: 300px; /* 固定高度 */
overflow-y: auto; /* 纵向滚动 */
display: block;
}
.table-fixed thead {
position: sticky; /* 固定表头 */
top: 0;
background-color: white;
}表格颜色主题
为表格应用预定义的颜色主题，如深色模式：
table.dark-theme {
background-color: #333; /* 深色背景 */
color: white; /* 白色文字 */
}
table.dark-theme th {
background-color: #444; /* 深色表头 */
}
table.dark-theme tr:hover {
background-color: #555; /* 深色悬停 */
}表格单元格合并样式
处理合并单元格时的特殊样式需求：
td[rowspan],
td[colspan] {
background-color: #e6e6e6; /* 合并单元格背景色 */
font-weight: bold; /* 加粗显示 */
}
