Javascript 使用DataTable垂直对齐表头

我有一个大约1K行的表，并使用

DataTable

进行分页。在中小型设备中，我是否可以使表具有垂直列

当我不使用

DataTable

但似乎不使用DataTable时，这似乎适用于

display:inlineblock

属性

我的表的示例标记

<style type="text/css">
   #vertical thead,#vertical tbody{
   display:inline-block;
   }
</style>
<table id="vertical">
   <thead>
      <tr>
         <th colspan="3">Header 1</th>
      </tr>
      <tr>
         <th colspan="3">Header 2</th>
      </tr>
      <tr>
         <th colspan="3">Header 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>row 1</td>
         <td>row 1</td>
         <td>row 1</td>
      </tr>
      <tr>
         <td>row 2</td>
         <td>row 2</td>
         <td>row 2</td>
      </tr>
      <tr>
         <td>row 3</td>
         <td>row 3</td>
         <td>row 3</td>
      </tr>
   </tbody>
</table>

#垂直车斗，#垂直车斗{
显示：内联块；
}
标题1
标题2
标题3
第1行
第1行
第1行
第2排
第2排
第2排
第3排
第3排
第3排

这会按照我想要的方式对齐它，但不适用于DataTable-

标题1第1行第1行第1行
标题2第2行第2行第2行
标题3第3行第3行第3行

尝试使用响应属性初始化

数据表

并引用示例，但均无效

---

如果不能使用

DataTable

，那么如果您可以建议任何替代方案，以实现分页和响应垂直列，那就太好了。使用

bootstrap3

和

jquery

顺便说一句。

使用

DataTable

无法获得表格的垂直列标题。克服这一问题的一种方法是按照本文的建议创建一个原型html

或者，如果您只需要分页，那么还有其他几个分页库，它们重量轻，支持自定义CSS规则和模板，而不强制执行任何固定规则。最后，我使用手柄和简单的旧CSS为不同的视口自定义创建了表格

---

一个将pagination.js与Handlebar集成的示例。

实际上有一个针对DataTables的响应插件。不起作用，我想DataTables的响应扩展只是为了处理列和相关数据，而不是使表列垂直。谢谢分享，我试过了。。但我发现使用不同的分页库可以灵活地按照我想要的方式维护标记。无论如何，谢谢你。