Удаление лишних килограмм в DataTables колонках

Question

Привет, так что я создал 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 = '<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

Легче всего было бы добавить sClass вариант, который добавляет класс к указанным столбцам. После этого вы можете создать свой my_class в соответствии с вашими потребностями. Таким образом, затрагивается только конкретный экземпляр таблицы, а не другие в вашем приложении.

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

Answer 2

Существует CSS-class определены для THeads в DataTables выглядеть в том, что:

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

играть с обивкой из этого класса.

Cheers !!

Answer 3

Если это связано с пространством между изображениями, вам нужно установить что-то вдоль линий font-size: 0 в вашем CSS для этой ячейки. Что-то вроде:

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 рендеринга, чтобы игнорировать все символы, присутствующие между открытием комментария (<!--) к закрытию комментарий (-->).

Конечно, если это не связано с пространством между изображениями, это не ваше решение. Я не мог точно сказать, какие дополнения вы точно указываете, но, основываясь на вашем упоминании о снимках, это было мое наилучшее образование.

Редактировать

Если вы ищете исправление для заполнения на конце ячейки таблицы, вам необходимо установить таблицу и ширину последующих клеток к 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 не является оптимальным образцом для наблюдения в обычных условиях.

Альтернативно можно установить контейнер для таблицы заданной ширины, а также. То, что вы видите с дополнительным дополнением в конце этой ячейки, - это таблица, заполняющая его контейнер. Если вы дадите ему меньший контейнер, тогда он заполнит меньше места.

Попробуйте обертывание #violators_tbl в DIV, который выглядит как <div class='table-shrink'><table id='violators_tbl'></table></div>, а затем добавить этот CSS:

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