Foundation框架支持通过基础类和自定义CSS调整表格样式。1. 使用.table、.striped、.hover等类设置默认样式；2. 通过具体选择器覆盖字体、边框、背景色等；3. 利用媒体查询和data-label属性控制响应式堆叠；4. 推荐使用SCSS变量修改$table-bg、$table-border-color等以深度定制，保持代码整洁。
Foundation 是一个强大的前端框架，内置了对表格（table）的基础样式支持。虽然它提供了默认的美观样式，但在实际项目中，我们经常需要对表格进行自定义以满足设计需求。下面介绍如何在 Foundation 框架中自定义表格样式。
理解 Foundation 表格基础类
Foundation 使用语义化的类名来控制表格外观。常用类包括：
- .table：基础表格样式，添加边框、间距和响应式支持
- .hover：鼠标悬停时高亮行
- .striped：斑马条纹行
- .stack：在小屏幕上堆叠显示（响应式）
- .expand：表格宽度占满父容器
例如：
<table class="table striped hover stack">
<thead>
<tr><th>姓名</th><th>年龄</th></tr>
</thead>
<tbody>
<tr><td>张三</td><td>25</td></tr>
</tbody>
</table>
覆盖默认样式
Foundation 的默认表格样式可能不符合你的设计风格。你可以通过自定义 CSS 覆盖其规则。建议使用更具体的选择器避免被覆盖。
立即学习“前端免费学习笔记（深入）”；
示例：修改字体、边框和背景色
.table {
font-size: 14px;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #ddd;
}
.table th,
.table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid #eee;
}
.table th {
background-color: #f5f5f5;
font-weight: 600;
}
.table tbody tr:hover {
background-color: #f9f9f9;
}
自定义响应式行为
Foundation 的 .stack 类会在小屏幕将表格转为堆叠布局。如果你希望更精细控制，可以结合媒体查询自定义。
比如，只在移动端启用堆叠，或调整堆叠后的标签样式：
@media (max-width: 768px) {
.table.stack thead {
display: none;
}
.table.stack tbody tr {
display: block;
margin-bottom: 15px;
border: 1px solid #ddd;
padding: 10px;
}
.table.stack td {
display: block;
text-align: right;
padding: 5px 0;
}
.table.stack td::before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
此时 HTML 需配合添加 data-label 属性：
<td data-label="姓名">张三</td>
与 SCSS 深度集成（推荐方式）
如果你使用 Foundation 的 SCSS 版本，可以直接修改变量或扩展组件。
在 SCSS 文件中调整表格变量：
$table-bg: #fff; $table-border-color: #e0e0e0; $table-striped-bg: #fafafa; $table-hover-bg: #f5f5f5; $table-cell-padding: 12px;
然后重新编译 CSS，这样能保持代码整洁并避免样式冲突。
基本上就这些。通过组合原生类、自定义 CSS 和 SCSS 变量，你可以灵活地控制 Foundation 表格的外观，既保留框架优势，又满足个性化需求。
