使用 DataTable 垂直对齐表头答案

【问题标题】：Vertically align table header using DataTable使用 DataTable 垂直对齐表头
【发布时间】：2018-07-29 15:00:22
【问题描述】：

我有一个大约 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。

【问题讨论】：

DataTables 实际上有一个响应式插件。
不工作，我猜数据表的响应式扩展只是玩弄列和相关数据，没有什么可以使表列垂直。
你要看this
感谢分享，我确实尝试过这个.. 但发现使用不同的分页库可以让我灵活地按照我想要的方式维护我的标记。无论如何，谢谢。

标签： javascript css html-table datatables

【解决方案1】：

您无法使用DataTable 为表格实现垂直列标题。解决这个问题的一种方法是按照post 的建议创建一个原型 html。

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

将 pagination.js 与把手 here 集成的示例。

【讨论】：