轻松掌握CSS嵌入表格技巧，让你的网页设计更上一层楼

th, td {
padding: 8px;
text-align: left;
border: 1px solid #ccc;
}

th {
background-color: #f2f2f2;
font-weight: bold;
}
border-collapse: collapse;
用于合并单元格边框，创建无间距的整洁表格。
width: 100%;
设置表格宽度为父元素宽度的100%，实现响应式设计。
margin: auto;
使表格居中显示。
padding
和
text-align
用于调整单元格内部和文字的对齐方式。
border
用于设置单元格边框的样式、宽度和颜色。
2.2 高级样式调整
使用CSS3的新特性，我们可以进一步提升表格的视觉效果：
table {
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

th {
background-color: #4CAF50;
color: white;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

tr:hover {
background-color: #ddd;
}
border-radius
用于添加圆角效果。
box-shadow
用于添加阴影效果，增强立体感。
background-color
用于设置单元格或表格的背景色。
nth-child(even)
选择偶数行，并设置背景色。
:hover
选择鼠标悬停的行，并设置背景色。
3. 响应式表格设计
随着移动设备的普及，响应式表格设计变得越来越重要。以下是一个简单的响应式表格示例：
@media (max-width: 600px) {
table {
display: block;
overflow-x: auto;
}

thead {
display: none;
}

tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}

td {
display: block;
text-align: right;
padding-left: 50%;
position: relative;
}

td:before {
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-right: 10px;
font-weight: bold;
text-align: left;
}
}
使用
@media
查询来检测屏幕宽度。
当屏幕宽度小于600px时，隐藏表头，并将表格行设置为块级元素。
使用
data-label
属性来存储列标题，并通过
:before
伪元素将其显示在对应的单元格左侧。
通过以上技巧，你可以轻松地使用CSS嵌入表格，让你的网页设计更上一层楼。