Column width not working
Column width not working
michaelkaldeck
Posts: 11Questions: 4Answers: 0
Hi I have read the other posts in the forum. Did not find solution.
<--! Datatables spezific files:-->
<link href="~/datatables/dataTables.bootstrap.min.css" rel="stylesheet" />
<script src="~/datatables/jquery.dataTables.min.js"></script>
<script src="~/datatables/dataTables.bootstrap.min.js"></script>*
<div id="datatablestest" style="width: 460px;margin: 0 auto;">
<table id="datatableresult" class="table table-condensed table-striped table-bordered table-hover" cellspacing="0">
</table>
</div>
var daTable = $('#datatableresult').DataTable({
"ajax": {
"url": daUrl,
"dataSrc": ''
},
"autoWidth" : false,
"columns": [
{ data: "JourID", title: "JourID", width: '50px'},
{ data: "JourTime", title: "JourTime", width: '50px'},
{ data: "Zust1", title: "Zust1", width: '30px'},
{ data: "Dokname", title: "Dokname", width: '100px'},
{ data: "Doktype", title: "Doktype", width: '100px'},
{ data: "JourInhaltTextOnly", title: "JourInhaltTextOnly", width:'550px'},
],
"paging": false,
"scrollY": 400,
"scrollX": true,
});
Has no effect at all.
DataTables makes column width that have nothing to do with the set options.
Am I misunderstanding completely, how this works ?
Thanks for Info
Cheers, Michael
This question has an accepted answers - jump to answer
Answers
Hi all
the only solution i found was in setting the th width AFTER generating the grid like $('thead > tr> th:nth-child(6)').css({ 'min-width': '550px', 'max-width': '550px' });.
So the question remains, what the functionality of the width: '100px' in the colums / columndefs is.
https://datatables.net/reference/option/columns.width talks of small deviations. But in my example (column with large wrapping text) it is completely different.
Thanks for clarifiying .
Regards Michael
The div containing your table has a width of 460px, but your column widths total roughly twice that. I don't understand why you're doing that.
it is typical for a situation I often have. Even with a 960 body I might have 7 - 12 cols, some quite large because they must not be wrapped (like long UNC path), and some texcols with much text wrapped but rel. wide for legibility. And I must be able to scroll horiz.
And basically the question remains, what the width options in the def of a colum means.
I created a quick test case essentially copying what you have and it looks ok to me:
http://live.datatables.net/jatazeho/1/edit
It was handy that your table has the same number of columns as the built-in JS BIN table
It uses bootstrap 3.3.7, your div and table config and your Datatables config. I have
autowidth: falsecommented because it seems to be causing a problem with the column layout.Please update as needed to recreate your problem.
Kevin
Hi Kevin
Thanks a lot for looking into it.
I changed my test, so I get the data from an already existing HTHL Table, as in your test on http://live.datatables.net/jatazeho/1/edit
Then the column width are generated correctly.
If I have the data coming from a json array, as in my original example, the problem remains: column width in DataTables generated html differ considerable from columwidth in option.
So in this case the problem remains. Or I am doing something completely wrong.
Thanks anyway
Michael
The way the column widths work in DataTables is that DataTables will create a "worst case" table when it is initialised (and if
columns.adjust()is called). The worst case table takes the longest string from each column and puts them all on a single row - so the table (which is hidden btw) has the header, a single body row with all the longest strings and the footer. The widths given are then applied to that table and the actual widths are read back from it.It does this to try and avoid column widths jumping when paging through the table.
In short, the widths you give are used, but if the table's content doesn't fit into them, or they don't add up correctly, the browser and DataTables will overrule you and use the widths only as a guide.
If you absolutely want pixel perfect control over the widths you need to use
table-layout: fixed;in your CSS.Also, don't disable the
autoWidthoption, particularly when scrolling. The browser can do all sorts of odd then then, such as that which you are seeing.Allan
I was able to use max-width to force a column to be a certain width.
I would tend to think that with a horizontal scroll enabled the given col width should override the calculated widths?
It appears that in datatables.net v1.10.20 there is no such property as table-layout.
There's no change with
table-layout, it's the same 1.10.20.Colin
I tried all solutions I could find on the web. Nothing worked.
What did work for me was to wrap my data in the column definition in an html object and then to limit the width of that by using a class
{
data: 'pageUrl',
title: 'Page URL',
render: function (data) {
return '<label class="limit-width">' + data + '</label>';
}
}
.limit-width {
max-width: 700px;
word-wrap: break-word;
}
Set width not work
there is my code
if ($.fn.DataTable.isDataTable('#example')) {
table.state.clear();
//table.dataTable().clear();
table.destroy();
table.MakeCellsEditable("destroy");
$("#example tbody").empty();
}* *
table = $('#example').DataTable({
ajax: {
"url": domain + '/api/GetAllLocationInfoDetail',
"type": "GET",
"dataSrc": "",
},
//autoWidth: true,
autoWidth: true,
//Paginate: false,
deferRender: true,
scrollY: 700,
scrollX: true,
//sScrollX: "100%",
"sScrollXInner": "150%",
scrollCollapse: true,
paging: true,
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
pageLength: 25,
stateSave: true,
processing: true,
//bLengthChange: false,
'sPaginationType': 'ellipses',
fixedColumns: {
leftColumns: 3
},
language: {
"url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json",
"processing": "処理中...",
"lengthMenu": "MENU 件表示",
"zeroRecords": "データはありません。",
"info": " TOTAL 件中 START から END まで表示",
"infoEmpty": " 0 件中 0 から 0 まで表示",
"infoFiltered": "（全 MAX 件より抽出）",
"infoPostFix": "",
"search": "部分検索:",
"url": "",
"paginate": {
"first": "先頭",
"previous": "前",
"next": "次",
"last": "最終"
},
select: {
rows: {
_: "%d行選択しました",
0: "",
1: "1行選択しました"
}
}
},
dom: '<"top"lf>irpt<"bottom"B>',
buttons: [
{
extend: 'excelHtml5',
text: 'Excel出力',
footer: true,
filename: '360°Viewer-保管場所マスタ',
exportOptions: {
//columns: ':visible:not(:eq(0))'
columns: "thead th:not(.noExport)"
}
},
{
extend: 'cexcelImport',
text: 'Excel取込'
},
{
extend: 'colvis',
text: '表示列選択'
},
{
extend: 'cupdate',
text: '登録'
},
{
extend: 'cdelete',
text: '削除'
}
],
initComplete: function () {
I have tried some adviced, like turn off autoWidth, set num% width ,use table-layout: fixed ,set static css into table , nothing work
help me plese!
thanks.
@systemsNatu You created a new thread here, please don't duplicate posts.
Perhaps the problem is due to the number of columns, if there are too many it will not seem to work. Try to determine a size for the table for example:
<
table id = "tbl-PriceDiscrepancy" class = "table table-condensed table-hover" style = "width: 9000px">
With this change my problem with column width disappeared
Width does not work as a "columns" option for dynamic tables.
Javascript like this:
Generates html that looks like this:
I am working with "DataTables-1.10.25", downloaded July 2021.
In my case, I do not attach the table's parent to the DOM until after the table has been constructed. This unattached state would foil any attempt by DataTables to take measurements directly on the table. But from the description of how DataTables works, it would seem no direct measurements are required. Furthermore, since my code is specifying "width", there is no reason to want to take a measurement.
Bottom line: I am getting style="width: 0px;" instead of what I asked for.
@I_AM_AL_X We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Test case:
live.datatables.net/dilemaqa/1/edit?html,js,output
Hope it is saved -- I was not able to "archive".
The result is just as stated in my earlier post.
That is not the case. When you use
columns.widthDataTables will do a number of calculations.DataTables "needs" a width of 100% assigned to it (using CSS alone isn't enough, since it is virtually impossible to read a relative value from the document). Also you would likely want to append the element from
table().container()to the document, which is the DataTable container, rather than just the table itself: http://live.datatables.net/dilemaqa/2/edit .Allan
In my case, this CSS property was the culprit
white-space: nowrap;I change it to the following and the width property of Datatables worked as expected.
white-space: break-spaces;Cheers!
Yes, the <table> element needs to have something like 'style="width:100%;". That fixed things, thank you.
Regarding other comments, you advised:
I looked at the re-factored example; that helped me understand your advice. Instead of ...
... I should take the instance created by DataTable and isolate the container created by DataTable, and put that container into "my_container". So, you wrote:
Regarding my musings, you informed me that DataTable
It looks like you are measuring the ratios of column widths for the "worst case" row, and then attempting to maintain that ratio when window size allows more width than required for the worst case. This is (at least one reason) why you need to do measurements; the ratios are based upon measurements.
My initial thought was that the "worst case" measurements could be done within an unbounded container, and therefore the size context would not be needed. That would make sense provided ALL of the columns have an assigned, absolute width. But, now I realize that if ANY of the columns is not an absolute width, then the size context is important, in fact, indispensable. Hence, the "100%" (or something like it) is required.
I am guessing that since, in my case, at the time of the measurements, the <table> is not part of the DOM, and therefore you have no context, the "100%" defaults to being 100% of the browser portal width. Not perfect, but usually good enough, and better than any other solution.
I'm glad this works, because it would be impossible for me to provide an in-the-DOM context. My issue is that even if I put the <table> into its container, the container is within a sub-tree that is not attached to the DOM until later. Luckily, I expect the "#my_container" to have width similar to the portal. Also, I will probably be assigning absolute widths, or absolute min-widths, to ALL the columns, so the ratios will be knowable.
Thank you for your quick response, your considerate explanation, and your helpful advice.