Basic Table是一个超轻量级的jQuery插件，用于使用JS创建响应灵敏的移动可读数据表调整大小（）方法和CSS3媒体查询。

参见：

• 移动设备上用于响应表的小型jQuery插件
• 轻量级jQuery响应表插件-ReStable
• 简单jQuery响应式表格插件-响应式表格

如何使用它:

1.在网页的首页部分包含所需的jQuery基本表插件的样式表。

<link rel="stylesheet" href="basictable.css">

2.安装jQuery库后，包括jQuery基本表插件的脚本。

<script src="jquery.min.js"></script>
<script src="jquery.basictable.min.js"></script>

3.在你的网页上创建一个标准表格。

<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill Smith</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

4.使用所有默认设置的基本实现。使用断点选项，用于在表格进入响应模式时自定义视口的宽度。

$('#table').basictable({breakpoint: 641});

5.使用CSS3媒体查询，而不是断点选项

@media only screen and (max-width: 568px) {
  #table thead {
      display: none;
  }

  #table tbody td {
      border: none !important;
      display: block;
      vertical-align: top;
  }

  #table tbody td:before {
      content: attr(data-th) ": ";
      display: inline-block;
      font-weight: bold;
      width: 6.5em;
  }

  #table tbody td.bt-hide {
      display: none;
  }
}

6.所有默认设置。

• 断点：568：自定义断点
• contentWrap：真：用class.bt内容将单元格中的原始内容包装成一个跨度，以帮助选择CSS。
• force响应：true：一旦遇到断点，库将始终强制表进入响应模式。如果设置为false，则只有当表本身大于其直接父级的内部宽度时，表才会更改模式。
• noResize: false：禁用基本表的JS调整大小。除非定义了媒体查询或基本表之外的另一个调整大小绑定，否则表不会进入响应模式。
• tableWrap: false：当库初始化时，使用class.bt包装器在表周围创建一个div包装器。当表模式更改时，这个包装器将切换一个活动类。
• showEmptyCells: false：当为true时，将显示空单元格。
• containerBreakpoint:空：当表将进入响应模式时，定义表容器的断点。
• 标头：true：如果表没有标题行，则设置为false。表将只响应表体和可选的页脚。

7.可用的方法。

$('table').basictable('start');
$('table').basictable('stop');
$('table').basictable('destroy');

更新日志：

v2.0.3版本（2023-03-08）

• 更新后的回退选择器未验证
• 更新的依赖项

2.0.2版（2021-01-30）

• 只是清理源代码、提交和文档。对功能没有影响。

2019-03-13

• 添加重新启动方法

2018-03-15

• 更改了压缩，使其成为一个较小的最小文件。还添加到NPM注册表中。

2016-12-09

• 支持在容器到达某个断点而不是视口时将表更改为响应模式。

2016-07-20

• 在现代移动浏览器上支持更长的表格单元格文本。
• 修复IE9中未正确呈现的表。

2016-03-27

• 一些支持多表选择器和强制显示空单元格的错误修复。

2016-03-25

• 固定多表选择

2016-01-31

• 添加了对colspan标题的多标题行支持。还有更好的tfoot支撑

2016-01-06

• 增加了对tfoot和重复bt内容包装器的支持

2015-12-21

• 修复了缺少第二个参数的问题

预览截图

jQuery 基本响应表插件 基本表