Foundation 表格的基本用法

m0_748252382026-01-16 10:56

Foundation 表格的基本用法

Foundation 是一个流行的前端框架，提供响应式表格组件，适用于各种屏幕尺寸。使用 Foundation 表格需要引入 Foundation 的 CSS 和 JavaScript 文件。

html 复制代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>

创建基础表格

使用 table 类创建基础表格结构，thead 和 tbody 分别定义表头和表体。

html 复制代码

<table class="table">
  <thead>
    <tr>
      <th>列标题 1</th>
      <th>列标题 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据 1</td>
      <td>数据 2</td>
    </tr>
  </tbody>
</table>

响应式表格

添加 responsive 类使表格在窄屏设备上可横向滚动。

html 复制代码

<div class="table-responsive">
  <table class="table">
    <!-- 表格内容 -->
  </table>
</div>

表格样式选项

Foundation 提供多种表格样式类：

hover：悬停高亮行
striped：斑马纹交替行
unstriped：移除斑马纹
stack：在窄屏下堆叠显示为块级元素

html 复制代码

<table class="table hover striped">
  <!-- 表格内容 -->
</table>

排序表格

Foundation 不直接提供排序功能，但可配合第三方插件如 tablesorter 实现。

javascript 复制代码

$(document).ready(function() {
  $(".sortable-table").tablesorter();
});

表格辅助类

使用 text-left, text-right, text-center 控制单元格内容对齐方式。

html 复制代码

<th class="text-center">居中对齐标题</th>
<td class="text-right">右对齐数据</td>

表格边框控制

通过 border 类添加边框，或使用 SASS 变量自定义边框样式。

scss 复制代码

$table-border: 1px solid #e6e6e6;

表格单元格合并

使用标准 HTML 属性实现单元格合并。

html 复制代码

<tr>
  <td colspan="2">跨两列</td>
</tr>
<tr>
  <td rowspan="2">跨两行</td>
</tr>