I'm looking for a way to set the max width or width of a single column in a DataTable.
I tried "columnDefs width" but this did not affect the width of the column.
This is the configuration of DataTables I'm using: https://datatables.net/download/#bs5/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-colvis-2.0.1/b-html5-2.0.1/b-print-2.0.1/cr-1.5.4/r-2.2.9
Maybe "columnDefs " does not work with the Responsive plugin?
Is there another way to set the max-width or width of a column.
How my table currently looks (the last column is far too wide):
![]()
The code used to create the table:
{
"language": {
"aria": {
"sortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
"sortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
},
"emptyTable": "Keine Daten vorhanden",
"info": "_START_ bis _END_ von _TOTAL_ Einträgen",
"infoEmpty": "0 bis 0 von 0 Einträgen",
"infoFiltered": "(gefiltert von _MAX_ Einträgen)",
"lengthMenu": "_MENU_ Einträge anzeigen",
"loadingRecords": "Wird geladen...",
"paginate": {
"first": "Erste",
"last": "Letzte",
"next": "Nächste",
"previous": "Zurück"
},
"processing": "<div class='processingWrapper hidden-print'><i class='far fa-spinner fa-spin'></i><p>Bitte warten...</p></div>",
"search": "Suchen",
"zeroRecords": "Keine Einträge vorhanden.",
"thousands": ".",
"infoPostFix": "",
"decimal": ""
},
"stateSave": true,
"stateDuration": 604800,
"lengthMenu": [
[
10,
20,
50,
100,
500
],
[
"10",
"20",
"50",
"100",
"500"
]
],
"pageLength": 10,
"processing": true,
"responsive": true,
"ajax": {
"url": "/AdvertisementCampaign/GetAtmGroupsOfCampaign?advertisementCampaignId=4",
"type": "POST"
},
"columns": [
{
"name": "Id",
"orderable": false,
"visible": true,
"responsivePriority": 10000,
"render":renderIdColumn,
"useAsGroupingColumn": false,
"data": "Id",
"searchable": false
},
{
"name": "Name",
"orderable": true,
"visible": true,
"responsivePriority": 10000,
"useAsGroupingColumn": false,
"data": "Name",
"searchable": true
},
{
"name": "Description",
"orderable": true,
"visible": true,
"responsivePriority": 10000,
"useAsGroupingColumn": false,
"data": "Description",
"searchable": true
}
],
"serverSide": true,
"order": [
[
1,
"asc"
]
],
"dom": "<'dt-toolbar'<'container-fluid'<'row'<'col-xs-12 col-sm-6 col-md-3 dataTableToolBarLeft hidden-print'l><'col-xs-12 col-sm-6 col-md-9 hidden-print dataTableToolBarRight'BT>>>>tr<'dt-toolbar-footer'<'container-fluid'<'row'<'col-md-4 col-lg-4 d-none d-md-block'i><'col-sm-12 col-md-8 col-lg-8 hidden-print pull-right'p>>>>",
"buttons": {
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"buttons": [
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"text": "Drucken",
"extend": "print",
"className": "btn-outline-primary dt-btn-action d-none d-md-block",
"autoClose": true,
"exportOptions": {
"columns": ":visible.export",
"format": {
"header":window.LsDataTables.getColumnTitle
}
},
"orientation": "landscape",
"pageSize": "LEGAL"
},
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"text": "Kopieren",
"extend": "copyHtml5",
"className": "btn-outline-primary dt-btn-action",
"autoClose": true,
"exportOptions": {
"columns": ":visible.export",
"format": {
"header":window.LsDataTables.getColumnTitle
}
},
"orientation": "landscape",
"pageSize": "LEGAL"
},
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"text": "Exportieren",
"extend": "collection",
"className": "btn-outline-primary dt-btn-action",
"autoClose": true,
"orientation": "landscape",
"pageSize": "LEGAL",
"buttons": [
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"text": "CSV",
"extend": "csvHtml5",
"className": "btn-outline-primary",
"autoClose": true,
"exportOptions": {
"columns": ":visible.export",
"format": {
"header":window.LsDataTables.getColumnTitle
}
},
"orientation": "landscape",
"pageSize": "LEGAL"
},
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"text": "Excel",
"extend": "excelHtml5",
"className": "btn-outline-primary",
"autoClose": true,
"exportOptions": {
"columns": ":visible.export",
"format": {
"header":window.LsDataTables.getColumnTitle
}
},
"orientation": "landscape",
"pageSize": "LEGAL"
}
]
},
{
"dom": {
"button": {
"className": "btn"
},
"buttonLiner": {
"tag": null
}
},
"extend": "reload",
"className": "btn-outline-primary dt-btn-action",
"autoClose": true,
"orientation": "landscape",
"pageSize": "LEGAL"
}
]
}
}
