编辑“︁CSS响应式表格”︁（章节）

= CSS响应式表格 =

响应式表格是CSS响应式设计的重要组成部分，它确保表格在不同屏幕尺寸下都能保持可读性和功能性。本文将详细介绍如何创建响应式表格，包括基础技术、代码示例和实际应用场景。

== 介绍 ==
响应式表格通过调整布局、隐藏非关键列或改变显示方式，使表格在移动设备等小屏幕上也能正常显示。传统表格在窄屏幕上会出现水平滚动或内容挤压，而响应式设计解决了这些问题。

== 基础技术 ==
以下是创建响应式表格的几种常用方法：

=== 1. 水平滚动 ===
最简单的解决方案是允许表格水平滚动。

<syntaxhighlight lang="css">
.table-container {
    overflow-x: auto;
}
</syntaxhighlight>

'''输入:'''
<syntaxhighlight lang="html">
<div class="table-container">
    <table>
        <!-- 表格内容 -->
    </table>
</div>
</syntaxhighlight>

'''输出效果:'''
在窄屏幕上，表格会保持完整宽度，容器会出现水平滚动条。

=== 2. 列堆叠 ===
在小屏幕上将表格行转换为块级元素，使每列变为单独行。

<syntaxhighlight lang="css">
@media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    td {
        /* 使每列看起来像单独行 */
        border: none;
        position: relative;
        padding-left: 50%;
    }
    td:before {
        /* 添加伪元素作为标签 */
        position: absolute;
        left: 6px;
        content: attr(data-label);
    }
}
</syntaxhighlight>

'''输入:'''
<syntaxhighlight lang="html">
<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="姓名">张三</td>
            <td data-label="年龄">28</td>
            <td data-label="职业">设计师</td>
        </tr>
    </tbody>
</table>
</syntaxhighlight>

'''输出效果:'''
在窄屏幕上，表格会垂直显示，每行变为"标签: 值"的形式。

=== 3. 优先级隐藏 ===
根据屏幕尺寸隐藏非关键列。

<syntaxhighlight lang="css">
@media screen and (max-width: 600px) {
    .optional-column {
        display: none;
    }
}
</syntaxhighlight>

== 高级技术 ==

=== 使用CSS Grid ===
对于现代浏览器，可以使用CSS Grid创建更灵活的表格布局。

<syntaxhighlight lang="css">
@media screen and (max-width: 600px) {
    .responsive-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}
</syntaxhighlight>

=== 断点选择 ===
响应式设计的关键是选择合适的断点。常见断点包括:

<mermaid>
pie
    title 常用响应式断点
    "小于600px (手机)": 35
    "600-900px (平板)": 25
    "900-1200px (小桌面)": 20
    "大于1200px (大桌面)": 20
</mermaid>

数学上，断点选择可以表示为:
<math>
B = \{ b | b \in \mathbb{R}, 0 < b \leq B_{max} \}
</math>
其中<math>B_{max}</math>是最大断点值。

== 实际案例 ==

=== 电商产品表 ===
考虑一个电商网站的产品比较表，包含产品名称、价格、评分和购买按钮。

'''桌面视图:'''
{| class="wikitable"
|-
! 产品名称 !! 价格 !! 评分 !! 操作
|-
| 产品A || \$99 || ★★★★☆ || [[购买]]
|-
| 产品B || \$129 || ★★★★★ || [[购买]]
|}

'''移动视图:'''
产品名称: 产品A
价格: \$99
评分: ★★★★☆
[[购买]]

产品名称: 产品B
价格: \$129
评分: ★★★★★
[[购买]]

=== 实现代码 ===
<syntaxhighlight lang="html">
<table class="product-table">
    <thead>
        <tr>
            <th>产品名称</th>
            <th class="price">价格</th>
            <th class="rating">评分</th>
            <th class="action">操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="产品名称">产品A</td>
            <td data-label="价格" class="price">\$99</td>
            <td data-label="评分" class="rating">★★★★☆</td>
            <td data-label="操作" class="action"><button>购买</button></td>
        </tr>
    </tbody>
</table>

<style>
@media screen and (max-width: 600px) {
    .product-table .price, 
    .product-table .rating, 
    .product-table .action {
        display: none;
    }
    /* 列堆叠样式 */
}
</style>
</syntaxhighlight>

== 最佳实践 ==
1. '''内容优先''': 确定哪些列在移动视图中是必须显示的
2. '''渐进增强''': 先确保基本功能，再添加高级特性
3. '''测试''': 在各种设备上测试表格显示效果
4. '''性能''': 避免过于复杂的布局导致渲染性能下降

== 总结 ==
响应式表格是创建现代网页的重要技术。通过水平滚动、列堆叠或选择性隐藏等技术，可以确保表格在所有设备上都能提供良好的用户体验。选择合适的技术取决于具体内容和用户需求。

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS响应式设计]]