删除 DataTables 列中的额外填充

Posted 2023-05-07

【中文标题】删除 DataTables 列中的额外填充

【英文标题】：Removing extra padding in DataTables columns

【发布时间】：2015-07-06 21:31:00

【问题描述】：

您好，我创建了如下所示的 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,
        ]);
    

【问题讨论】：

你能添加一个 JSFiddle 吗？

【参考方案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 ] ,

            
        ]
     );
 );

干杯！！

【讨论】：

这将影响应用程序中所有数据表的实例。

@ArinCool 是的，所以它在任何地方都是一样的。如果我们只想要这个表，我们可以使用容器 > table > thead > td 为这个表编写一个特殊的类。

我在配置中添加了 autowidth : false 。有效。呵呵呵呵。

【参考方案2】：

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

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

【讨论】：

是的，我这样做了，我将 autowidth 指定为 false。谢谢。

@JCFrane 如果它解决了问题，您可以接受这个答案。我说得对吗？ :)

是的，我接受这一点，而且您必须将自动宽度指定为 false。谢谢！

【参考方案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 */