通过在 HTML/CSS + JS (Datatables) 中将两列合并为一列来显示表格

如何解决通过在 HTML/CSS + JS (Datatables) 中将两列合并为一列来显示表格

我使用 https://datatables.net/ 在我的网络服务上呈现可排序和可搜索的表格。我的桌子变得很宽，因为有很多列。我想通过将相关列合并为一来减少宽度。同一行的两个单元格的数据应显示在一个带有换行符的单元格中。

我想改变这个：

A B C
D E F
G H J

为此：

A B
... C
德
... F
G H
... J

这是我的 JS 示例

<script>
var dataSet =
[
    {"name": "A","absolute": 10,"relative": 0.1},{"name": "B","absolute": 20,"relative": 0.2},{"name": "C","absolute": 11,"relative": -0.1},{"name": "D","absolute": 100,"relative": 0.3},{"name": "E","absolute": 8,"relative": 0.04},];
$(document).ready(function ()
{
  $("#example").DataTable(
  {
    data: dataSet,columns:
    [
            { data: "name",title: "Name" },{ data: "absolute",title: "Absolute + <br> "Relative",render: function ( data,type,row,Meta ) {
                return row.absolute + "<br>" + row.relative; }},],"columnDefs": [{ targets: 'data-sortable',orderable: false }]
  });
 });
</script>
<table id="example" class="display" width="100%"></table>

在本例中，我使用“render”函数将两个数据列渲染为一个。问题是，排序将在完整/连接/呈现的字符串上完成。我仍然想按“绝对”和“相对”列进行排序。表格的标题应该有两个“组合”列的“排序”按钮。

是否有一些隐藏或 colspan 的 html/css 技巧来实现我的目标？我在谷歌上搜索了很多，似乎我必须在 JS 中自己编写所有内容。我找不到适合我的东西。但是，具有这种合并列合并显示功能的网页太多了。

Here is an example of a table from comdirect bank. Here you can sort in one column two or three different values. This is exactly what I want

解决方法

所以，我没有找到解决问题的简单方法... 我不得不自己编写javascript。这是我的解决方案：github repository for my 'boss table'

可能也可以为数据表编写一些插件，但我不知道这是如何工作的。我也是一个 javascript-noob ......所以我自己写它更容易。