删除 DataTables 列中的额外填充

Question

您好，我创建了如下所示的 JQuery 数据表：

所以我的问题是如何删除“图片”列中过多的填充？

这是我初始化表格的方式：

$('#violators_tbl').DataTable({
            "aoColumnDefs": [
                { "bSortable": false, "aTargets": [ 2,3 ] },
                { "sWidth": "20%", "aTargets": [ 0 ] },
                { "sWidth": "35%", "aTargets": [ 1 ] },
                { "sWidth": "30%", "aTargets": [ 2 ] },
                { "sWidth": "15%", "aTargets": [ 3 ] },
            ],
        });

这就是我向表中添加行的方式：

function update_table(violator){
        var img_str1 = '<img class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.front_temp_file_path + '\">';
        var img_str2 = '<img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.rear_temp_file_path + '\">';
        var img_str3 = '<img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.right_temp_file_path + '\">';
        var img_str4 = '<img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.left_temp_file_path + '\">';
        violators_table.dataTable().fnAddData([
            violator.violator_id,
            violator.get_full_name(),
            'Under Construction',
            img_str1 + img_str2 + img_str3 + img_str4,
        ]);
    }

Answer 1

我有两种查看方式：

1。 CSS 类更改（影响无处不在）

在数据表中有一个为THeads定义的cssclass，请查看：

table.dataTable thead th, table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #111;
}

2。使用 Datatables API（影响特定的表实例）

正如@ArinCool 的回答中提到的：

aoColumnDefs: 它允许通过索引和相关样式或函数传递列数组以应用于该列。这是一个例子

$('#example').dataTable( {
        "aoColumnDefs": [
            {

                // mention css class-name and targetted column index (starts with zero from left)                    
                { "sClass": "class-name", "aTargets": [ 4 ] },

            }
        ]
    } );
} );

干杯！！

Answer 2

更简单的方法是添加sClass 选项，它将一个类添加到指定的列。此后，您可以根据需要设置my_class 的样式。这样，只有特定的表实例会受到影响，而不会影响您应用程序中的其他实例。

$('#violators_tbl').dataTable({
    "aoColumnDefs": [
      { "sClass": "my_class", "aTargets": [ 0 ] }
    ]
  } );

Answer 3

如果这与图片之间的间距有关，您需要在 CSS 中为该单元格设置类似于 font-size: 0 的内容。比如：

td.picture-cell {
  font-size: 0;
}

或者，如果你真的不想接触 CSS，你可以用你的 JS 来做：

var img_str1 = '<img class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.front_temp_file_path + '\"><!--';
var img_str2 = '--><img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.rear_temp_file_path + '\"><!--';
var img_str3 = '--><img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.right_temp_file_path + '\"><!--';
var img_str4 = '--><img style=\"margin-left: 10px;\" class=\"obj-pic\" src=\"' + Main.Vars.base_path + violator.left_temp_file_path + '\">';

您正在处理的是渲染空白。这相当于格式化代码时出现的一堆空格。第一个解决方案告诉浏览器（通过 CSS）将您的空白字符呈现为空（font-size: 0;）。

第二种解决方案将注释中一个img 标记的结尾包装到下一个img 标记的开头，这告诉HTML 呈现引擎忽略注释开头之间存在的所有字符（<!-- ) 到评论结束 (-->)。

当然，如果这与图片之间的空间无关，那么这不是您的解决方案。我无法确定您到底指的是什么填充，但根据您提到的图片，这是我最有根据的猜测。

编辑

如果您正在寻找表格单元格的 end 填充的修复方法，您需要使用 CSS 将表格和后续单元格的宽度设置为 auto，如下所示：

#violators_tbl {
  width: auto!important;
}
#violators_tbl td {
  width: auto!important;
}

然后，您可以像这样重新调整各个列的宽度：

#violator_tbl td:nth-child(1) { /* This is the first column */
  width: 40px!important;
}
#violator_tbl td:nth-child(2) { /* This is the second column */
  width: 80px!important;
}

nth-child 中的数字表示列出现的顺序（1 表示第一列，2 表示第二列，等等）

我通常不会推荐 !important 修饰符，但由于我不知道驱动该表的 CSS 是什么样的，所以我不会费心试图超越现有的特异性。请记住，!important 不是在正常情况下遵循的最佳模式。

或者您也可以将表格的容器设置为指定的宽度。您在该单元格末尾看到的额外填充是填充其容器的表格。如果你给它一个更小的容器，那么它会填充更少的空间。

尝试将 #violators_tbl 包装在一个看起来像 <div class='table-shrink'><table id='violators_tbl'></table></div> 的 div 中，然后添加这个 CSS：

.table-shrink {
  width: 400px; /* Whatever width works best for you goes here */
}