javascript - 使用 DataTable 垂直对齐表头

Question

我有一个大约 1K 行的表并使用 DataTable 进行分页。无论如何，我可以让表格在中型/小型设备中具有垂直列吗？

当我不使用 DataTable 时，这似乎适用于 display: inline-block 属性，但似乎不适用于适当的 DataTable。

我的表格的示例标记

<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>

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

标题1行1行1行1
表头2行2行2行2
表头3行3行3行3

尝试使用响应式属性初始化 DataTable 并引用示例 here ，一切都无济于事。

如果无法使用 DataTable，如果您能提出任何替代方案以实现分页和响应式垂直列，那就太好了。使用 bootstrap 3 和 jquery 顺便说一句。

Answer 1

您无法使用 DataTable 为表格实现垂直列标题。克服这个问题的一种方法是按照此 post 的建议创建原型(prototype) html .

或者，如果您正在寻找的只是分页，还有其他几个分页库，它们重量轻，支持自定义 CSS 规则和模板，无需强制执行任何固定规则。我最终使用了 pagination.js并使用 HandleBars 和普通的旧 CSS 为不同的视口(viewport)自定义创建我的表格。

将 pagination.js 与 Handlebars 集成的示例 here .