删除DataTables列中的额外填充
嗨所以我创建了如下所示的JQuery DataTables：
所以我的问题是如何在“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 = '![]()
'; var img_str2 = '![]()
'; var img_str3 = '![]()
'; var img_str4 = '![]()
'; violators_table.dataTable().fnAddData([ violator.violator_id, violator.get_full_name(), 'Under Construction', img_str1 + img_str2 + img_str3 + img_str4, ]); }
更简单的方法是添加一个sClass选项，它将一个类添加到指定的列。 此后，您可以根据需要设置my_class样式。 这样，只会影响特定的表实例，而不会影响应用程序中的其他实例。
$('#violators_tbl').dataTable({ "aoColumnDefs": [ { "sClass": "my_class", "aTargets": [ 0 ] } ] } );
在数据表中为THeads定义了一个css class来查看：
table.dataTable thead th, table.dataTable thead td { padding: 10px 18px; border-bottom: 1px solid #111; }
玩这个类的填充。
干杯！！
如果这与图片之间的空间有关，则需要在CSS中为该单元格设置font-size: 0行。 就像是：
td.picture-cell { font-size: 0; }
或者，如果你真的不想触摸CSS，你可以用你的JS做到这一点：
var img_str1 = '
';
你正在处理的是渲染空白区域。 这相当于格式化代码时出现的一堆空格。 第一个解决方案告诉浏览器（通过CSS）将空白字符渲染为空（ font-size: 0; ）。
第二个解决方案将一个img标记的结尾包装到注释中下一个img标记的开头，该注释告诉HTML呈现引擎忽略注释开头（ ）。
当然，如果这与图片之间的空间无关，那么这不是您的解决方案。 我无法确切地说出你正在引用什么填充，但根据你提到的图片，这是我最好的教育猜测。
编辑
如果您正在寻找表格单元格末尾填充的修复，则需要将表格和后续单元格的宽度设置为auto使用CSS，如下所示：
#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不是在正常情况下要遵循的最佳模式。
或者，您也可以将表的容器设置为指定的宽度。 你看到的那个细胞末端的额外填充物就是填充容器的桌子。 如果你给它一个较小的容器，那么它将填充更少的空间。
尝试在一个看起来像
的div中包装#violators_tbl ，然后添加这个CSS：
.table-shrink { width: 400px; /* Whatever width works best for you goes here */ }