Foundation 表格

Foundation 5 表格（Tables）

Foundation 5 的表格样式简洁、美观，默认带有边框和填充。支持多种变体，包括条纹（striped）、悬停高亮（hover）、堆叠（stacked，用于移动端响应式）等。

1. 基本表格

直接使用 <table> 标签，Foundation 会自动应用样式（边框、填充、交替背景等）。

2. 常用类

• .striped：条纹表格（奇数行背景不同）。
• .hover：鼠标悬停行高亮。
• .stack：堆叠表格（小屏下转为垂直堆叠，适合移动端响应式）。
• .stacked：类似 .stack，旧版常用。

这些类可以组合使用。

3. 代码示例

在你的 HTML 模板中添加以下代码测试：

<div class="row">
    <div class="columns">
        <h3>基本表格</h3>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>城市</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>28</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>35</td>
                    <td>上海</td>
                </tr>
                <tr>
                    <td>王五</td>
                    <td>22</td>
                    <td>广州</td>
                </tr>
            </tbody>
        </table>

        <h3>条纹 + 悬停表格</h3>
        <table class="striped hover">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>城市</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>28</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>35</td>
                    <td>上海</td>
                </tr>
            </tbody>
        </table>

        <h3>响应式堆叠表格（小屏垂直显示）</h3>
        <table class="stack">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>城市</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>张三</td>
                    <td>28</td>
                    <td>北京</td>
                </tr>
                <tr>
                    <td>李四</td>
                    <td>35</td>
                    <td>上海</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

4. 小贴士

• 表格默认 100% 宽度，可包裹在 .row 和 .columns 中控制宽度。
• 无需额外 JS，直接类名生效。
• 在小屏下，.stack 类会自动将表格转为卡片式堆叠，提高移动端可读性。

复制代码运行，缩小浏览器窗口就能看到堆叠效果！如果想学列表、按钮、表单或其他组件，继续告诉我下一个话题。