表格样式如何美化？CSS怎么控制表格外观？

/* 基础重置与表格整体样式 */
table {
    width: 100%; /* 让表格宽度充满父容器 */
    border-collapse: collapse; /* 合并边框，这是个很重要的选择 */
    margin-bottom: 1.5em; /* 给表格下方留点空间 */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 字体选择 */
    color: #333; /* 基础文字颜色 */
}

/* 表头样式 */
th {
    background-color: #f2f2f2; /* 表头背景色 */
    color: #333; /* 表头文字颜色 */
    font-weight: bold; /* 加粗 */
    padding: 12px 15px; /* 内边距 */
    text-align: left; /* 左对齐 */
    border-bottom: 2px solid #ddd; /* 底部边框 */
}

/* 单元格样式 */
td {
    padding: 10px 15px; /* 内边距 */
    border-bottom: 1px solid #eee; /* 底部边框 */
    text-align: left; /* 左对齐 */
}

/* 斑马线效果：提升可读性 */
tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* 偶数行背景色 */
}

/* 鼠标悬停效果：增加交互性 */
tbody tr:hover {
    background-color: #e0e0e0; /* 悬停背景色 */
    cursor: pointer; /* 鼠标指针变为手型 */
}

/* 最后一个单元格的底部边框可以去掉，让表格看起来更清爽 */
tbody tr:last-child td {
    border-bottom: none;
}

border-collapse

border-collapse: collapse;

table

th

td

border

table {
    border-collapse: collapse; /* 边框合并 */
}
th, td {
    border: 1px solid #ccc; /* 给每个单元格和表头一个边框 */
}

border-collapse: separate;

border-spacing

table {
    border-collapse: separate; /* 边框分离 */
    border-spacing: 5px 10px; /* 水平间距5px，垂直间距10px */
}
th, td {
    border: 1px solid #ccc; /* 独立的边框 */
}

border-collapse: collapse;

padding

border-bottom

:nth-child()

/* 偶数行背景色 */
tbody tr:nth-child(even) {
    background-color: #f8f8f8;
}

/* 奇数行背景色（可选，如果不想默认白色，可以设置） */
tbody tr:nth-child(odd) {
    background-color: #ffffff; /* 或者其他浅色 */
}

/* 鼠标悬停效果也可以和斑马线叠加，增加交互反馈 */
tbody tr:hover {
    background-color: #e6e6e6; /* 悬停时稍微深一点的颜色 */
}

even

<tr>

odd

overflow-x: auto;

.table-container { /* 包裹表格的容器 */
    width: 100%;
    overflow-x: auto; /* 当内容溢出时，在X轴方向显示滚动条 */
    -webkit-overflow-scrolling: touch; /* iOS上的平滑滚动 */
}

/* HTML结构大概是这样 */
/* <div class="table-container">
    <table>
        ...
    </table>
</div> */

display

th

td

table-cell

block

td

data-label

<!-- HTML 示例 -->
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="姓名">张三</td>
            <td data-label="年龄">25</td>
            <td data-label="城市">北京</td>
        </tr>
        <!-- 更多行 -->
    </tbody>
</table>

/* 移动端媒体查询 */
@media screen and (max-width: 768px) {
    table, thead, tbody, th, td, tr {
        display: block; /* 让所有表格相关元素都变成块级元素 */
    }

    thead tr {
        position: absolute; /* 隐藏表头，但保持其存在以便辅助读取data-label */
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #ccc;
        margin-bottom: 15px; /* 每行之间增加间距，看起来像卡片 */
        padding: 10px;
    }

    td {
        border: none; /* 去掉单元格边框 */
        position: relative;
        padding-left: 50%; /* 为data-label留出空间 */
        text-align: right; /* 内容右对齐 */
    }

    td:before {
        content: attr(data-label); /* 显示data-label的内容 */
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left; /* 标签左对齐 */
        font-weight: bold;
    }
}