Spectre.css通过.table-responsive实现响应式表格，配合.table-striped和.table-hover提升可读性，并支持.table-vert堆叠模式在小屏下将数据转为卡片式展示，无需JavaScript即可适配移动端，简化开发流程。
Spectre.css 是一个轻量、现代化的 CSS 框架，提供了简洁的类名和强大的布局能力，特别适合快速构建响应式界面。在处理表格时，尤其是在小屏幕设备上展示大量数据，传统的表格容易溢出或难以阅读。Spectre.css 提供了内置的响应式表格类，能自动优化表格在移动设备上的显示方式，无需额外编写媒体查询。
使用 .table-responsive 实现基础响应式表格
为了让表格在窄屏设备上可横向滚动，Spectre.css 提供了 .table-responsive 类。将该类应用于 <div> 包裹 <table> 元素，即可启用横向滚动功能。
示例如下：
<div class="table-responsive"><table class="table">
<thead>
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>职位</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>zhang@example.com</td>
<td>前端开发</td>
</tr>
</tbody>
</table>
</div>
这样在手机等小屏幕上，用户可以通过左右滑动查看完整表格内容，避免布局错乱。
立即学习“前端免费学习笔记（深入）”；
使用 .table-striped 和 .table-hover 增强可读性
在响应式基础上，可以进一步提升表格的视觉体验。Spectre.css 支持以下辅助类：
- .table-striped：为表格添加隔行变色效果，便于阅读长数据表
- .table-hover：鼠标悬停时高亮当前行（适用于桌面端）
这些类可与 .table-responsive 同时使用，互不冲突。
堆叠模式：小屏下将行转为卡片式布局
对于字段较多的表格，横向滚动可能仍不够友好。Spectre.css 支持通过 .table-vert 类实现“垂直堆叠”模式。在小屏幕上，每行数据会变成类似卡片的结构，每个单元格以“标签 + 值”的形式展示，极大提升可读性。
使用方法是在 <table> 上同时添加 .table 和 .table-vert：
<div class="table-responsive"><table class="table table-vert">
... 表格内容 ...
</table>
</div>
在移动端查看时，原本的一行数据会垂直排列，例如：
姓名: 张三 邮箱: zhang@example.com 职位: 前端开发
这种转换由框架自动完成，开发者无需额外 JavaScript。
基本上就这些。Spectre.css 通过简单的类名组合，让响应式表格变得非常容易实现。只需包裹容器并添加对应类，就能适配各种设备，适合快速开发后台管理、数据报表等场景。不复杂但容易忽略细节，建议查阅官方文档确认类名拼写和兼容性。
