Question

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

当我不使用display: inline-block时，这似乎可以与DataTable属性一起使用，但似乎不适用于适当的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的建议创建HTML原型。

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

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

使用DataTable垂直对齐表头

1 个答案: