如何在 jquery 数据表中为表格添加边距？答案

【问题标题】：How to add margin to table in jquery datatables?如何在 jquery 数据表中为表格添加边距？
【发布时间】：2016-01-27 12:18:57
【问题描述】：

我需要在表格、表格长度和表格分页之间添加一些空格。像这样：enter link description here 这是我的js代码：

$(document).ready(function () {
        $('#data-table').dataTable({
            bFilter: false,
            aoColumnDefs: [
              {
                  bSortable: false,
                  aTargets: [1, 2],

              },
            {
                'bVisible': false,
                aTargets: [4],
            },
            {

                "targets": 0,
                "render": function (data, type, full, meta)
                {
                    return '<a href = "@(Url.Action("EmployeeAccount", "Company"))?EmployeeId=' + full[4] + '">' + data + '</a>';
                }
            },
            ]
        })
    });

HTML：

     <table class="table table-striped table-bordered table-hover little_margin_table" id="data-table" width="100%">
/...
                    </table>

我该怎么做？

【问题讨论】：

标签： javascript jquery css datatables

【解决方案1】：

必须在表格的div wrapper中设置表格的边距，例如：

如果你有 id userTables 的表格，请在 css 中使用选择器 #userTables_wrapper 来设置表格边距。为什么？看下面的截图：

Datatables 自动生成 id 为 your_table_id + "_wrapper" 的 div 包装器。此包装器是您的表的父级。

【讨论】：

【解决方案2】：

在您的 CSS 中：

#data-table {
    margin: 20px 0;
}

但是，老实说，您的问题缺少任何 HTML 和/或 CSS。它也是公然未经研究的，因为可以理解在 HTML 元素之间添加边距而无需在 SO 上发布问题。

无论如何，CSS 的作用是为您的表格创建 20px 的顶部和底部边距。

【讨论】：

我尝试这样做，但不幸的是它不起作用。创建表时，jquery 会为其分配涵盖我所有样式的其他样式。

【解决方案3】：

使用以下 CSS 规则：

table.dataTable {
  margin-top:2em !important;  
  margin-bottom:2em !important;  
}

有关代码和演示，请参阅 this jsFiddle。

【讨论】：

【解决方案4】：

使用Datatables Styling 为您的数据表创建样式或自行修改您的css：

table.dataTable {
margin: 20px 0 !important;
}

【讨论】：

【解决方案5】：

试试这个 CSS：

table.dataTable {
     padding-top: 50px;
}

【讨论】：

【解决方案6】：

如果所有 CSS 技巧都失败了，并且您想要一个右侧边距，您可以使用以下方法在右侧添加一个小的空白列：

  <th> &nbsp; </th> ... <td> &nbsp; </td>"

它看起来有点狡猾，但有效地解决了问题。在某些浏览器中，滚动条会覆盖宽表中最右侧列的一部分。

【讨论】：