DataTables 嵌套表与折叠：如何删除填充？答案

【问题标题】：DataTables nested table with collapse : how remove padding?DataTables 嵌套表与折叠：如何删除填充？
【发布时间】：2016-05-10 18:23:49
【问题描述】：

我创建了一个演示来使用 Datatables 来让子行具有折叠/展开功能。我无法在父级中对齐嵌套表。我想要相同的列宽。

你可以在这里看到 JSFiddle enter link description here

我尝试添加这个，但没有成功。

.childtable.dataTable tbody th, .childtable.dataTable tbody td {
    padding: 0;
}

【问题讨论】：

这是一个真正的挑战，因为您在 dataTable 中使用 dataTable，而内联 dataTable 是另一个隐藏的克隆。在很多方面，任何对齐尝试都被 dataTable 或注入的样式所推翻。如果您真的希望 dataTabled' 行作为子行，为什么不将这些行添加/删除到 dataTable 的“父”下方，而不是注入子表？这真的很简单，并且会立即为您提供所需的布局。

这是我之前做的，但问题是Datatables所做的排序。我的孩子行也被排序，这是不希望的。我试着让它像这个例子一样工作：datatables.net/examples/api/row_details.html 但你必须手动创建行而不是使用从 ajax 接收到的 json 数组。

那么你必须走上艰难的道路，以编程方式更新子列以使其具有与它们的“父”列相同的宽度，并且你必须做很多 CSS 来防止内部 dataTable 的样式与外部相同。

我在这里做了一个演示 jsfiddle.net/survivant/811b41kL/2 它可以工作

标签： html css ajax datatables datatables-1.10

【解决方案1】：

解决问题的最佳方法是使用选择器（+ 和 >）的组合：

// For remove padding of nested table-cell
table.dataTable tbody tr.shown + tr > td {
    padding: 0;
}

// For set the width of first column
table.dataTable tbody tr.shown + tr table.dataTable tbody td.sorting_1,
td.details-control {
    width: 40px;
}

http://jsfiddle.net/alexndreazevedo/jpnr2e6c

不幸的是，只能对齐嵌套列，为每列设置一个固定的百分比。然而，它可能无法用流畅的文本阅读。

一种解决方法是更改您的标记。取决于你！

【讨论】：

感谢您的帮助。我也取得了一些进展。这里有一个更完整的 javascript 示例：jsfiddle.net/survivant/qxfhh024/2