Question

大家好我已经创建了如下所示的JQuery DataTable：

enter image description here

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

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

$('#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类更改（影响无处不在）

在数据表中为class定义了一个css THeads来查看：

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 处的填充修补程序，则需要设置表格和后续单元格＆＃39;使用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 */ }

删除DataTables列中的额外填充

3 个答案:

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

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