Table Width

brilang

I'm using a DataTable in a fluid layout. The DataTable plugin appears to be calculating the width of the table in pixels and applying width: nnnpx as an inline style to the table element. I think there should be the option to calculate the width via a user-configurable variable to match the standard CSS width units. (%, em, px, etc...)
Example Source Code:
[code]



ID
Created By
Date
Company
Origin
Destination





#NumberFormat(rsTickets.ID, '000000')#
#rsTickets.FullName#
#DateFormat(rsTickets.CreatedTime,'yyyy-mm-dd')# #TimeFormat(rsTickets.CreatedTime,'hh:mm tt')#
#rsTickets.CompanyName#
#rsTickets.QuoteOriginCity#, #rsTickets.QuoteOriginCountry#
#rsTickets.QuoteDestinationCity#, #rsTickets.QuoteDestinationCountry#




$(document).ready(function () {
$('#datatable').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"aoColumns": [
{"bSearchable": true},
{"bSearchable": true},
{"bSearchable": true},
{"bSearchable": true},
{"bSearchable": true},
{"bSearchable": true}
] } );
} );


[/code]
Example Generated Code. Note this: style="width: 1089px;" on the
[code]
Show 102550100 entriesSearch:



Quote ID
Created By
Created Date
Company
Origin

Destination





000001
Fred Flintstone
2009-11-17 10:43 AM
Test Company
Vancouver, Canada
Seattle, United States


000002
Barney Rubble
2009-11-17 11:10 AM
Another Company
Toronto, Canada
Amsterdam, Netherlands

Showing 1 to 2 of 2 entriesFirstPrevious1NextLast
[/code]

brilang

So, when I resize the browser window, the width of the table withing the datatable_wrapper remains the same whereas the rest of my page resizes properly.

I've found a work-around in that I have used the following CSS to force the table to obey me.
[code]
#datatable {
width: 100% !Important;
}
[/code]

Not an ideal situation, and I'd like to see a fix.

brilang

Anyone got a comment? Can anyone else confirm this behaviour?

allan

Hi brilang,

Yes I can confirm this. DataTables will set a static width on the table in order to try and stop some of the "nasty" resizing issues that can occur over paging. However, you can stop it doing this using bAutoWidth:false ( http://datatables.net/usage/features#bAutoWidth ) - this will allow your table to keep all the relative sizes you give it. The reason for doing it this way is to allow rapid development with DataTables, so there isn't a requirement on setting the widths manually, but allowing that option if it should be wanted (like in this case).

Regards,
Allan

jlundell

Reviving this thread…I just started using DataTables (1.6.1) on a fairly trivial table in the DOM. Mostly it works fine, but if I reload the page, occasionally the table width shrinks to a much smaller (but non-zero) width, and occasionally it goes wider than my page. In all cases, the three columns are "appropriately" sized, given the overall table width.

(No options on DT initialization.)

allan

That sounds very odd indeed. It sounds like your Javascript is rendering the table, and calculating the width, before it's flowed the entire document. I presume you are using $(document).ready, or something like that? I can't say I've seen this recently, so If you have a working example, that would be most useful. Also do you have something like width="100%" on the table? And does it work if you set bAutoWidth:false?

Regards,
Allan

jlundell

As below. I don't have a way of making it publicly available at the moment. I'll try bAutoWidth.

I see it with Safari 4.0.4 (OS X 6), but not Firefox.

FWIW, when the table is in its small state, it appears to be sized to its content, though the th's do have width styles attached (viewed via Inspect Element). In the "normal" state, it's sized to its container. In the large state, I have no idea; it's bigger than my window. In the example I'm looking at right now, the normal table width is 750; the big is 1152. And now 1164. Even though dtable_wrapper is (implicitly) 750px.

And I see it with Chrome. So…WebKit?


[code]
$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#dtable tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});

/* Init the table */
oTable = $('#dtable').dataTable();
} );

…


LabelHostnameDescription

vpeptest110.3.50.11Test 1
vpeptest210.3.50.12Test 2
vpeptest310.3.50.13Test 3
LabelHostnameDescription
[/code]

jlundell

disabling AutoWidth fixes it as well.

allan

I've got to confess, that I have no idea why this would be happening! Sorry! All I can guess is that the browser is running the script early and calculating the wrong width. If you were to wrap your table in a DIV with a specific width and give the table width="100%" does that do the trick? If not, then perhaps bAutoWidth:false, and assign the width's you want for each column manually...

Regards,
Allan

jlundell

I can live with turning off autowidth. dtable_wrapper is already a fixed width. Won't a 100% width just get overwritten but autowidth?

If it would help, I can try to create a minimal case and post it on the public web. Let me know.

allan

What should happen is that DataTables will look at the width of the plain HTML table and just fix it to that. So if you have a table that is width="100%", it is 'x' pixels wide. So DataTables sets it to 'x'px just to make sure the width doesn't jump around. Now I'm guessing that the 'x' calculated is occurring at some point when the document hasn't been fully flowed.

Actually that's a point - I optimised the drawing of the table some what in 1.6.1. What version are you using? 1.6.1 might actually solve the problem if you are using an older version. Fixing the table fix is actually the last thing that DataTables does on initialisation now.

REgards,
Allan

jlundell

I'm using 1.6.1. And I just started using DT, so I don't have an earlier experience to compare it to. For all I know it worked better before....

Let me ask something that's maybe more of a CSS than a DT question. What I'm after, ideally, is a 100% table width, with all the columns but the last sized to their content, and the last column taking up the rest. The first columns aren't fixed-width, though, because their content isn't.

allan

This is the thing about bAutoWidth - with is left on, it should calculate the optimal with based on the longest string in the table. If you want to override that, and stop DataTables from trying to be too clever for it's own good (which it looks like it is doing here), you can set bAutoWidth to false, then then simply put the widths you want onto the the table and TH elements (i.e. columns) in the table. It's very odd that it seems to be doing the calculation early, and even worse, only sometimes. Perhaps sizing it just like a regular table is the way to go for now - and if I can get this reproduced, then I'll look into a fix.

Regards,
Allan

jwmonteith

Allan,

I have spent a considerable amount of time trying to get control of the widths of the columns and am pretty sure that setting bAutoWidth to false is not working. Datatables continues to auto-calc the column widths as it sees fit. I have trimmed down the code to the bare bones even removing jEditable just to see if that is the problem, but no effect. I decided to set my table heading in the html instead of using aoColumns, using a class for all columns setting table-layout: fixed and an id for each column setting the desired width. I also tried to set column width with sWidth but no luck. Below are the code snippets.


.tblcols {
table-layout: fixed;
}
#idRank {
width: 25px;
}
#idTicket {
width: 25px;
}
etc.





xxxx
xxxxxx
xxxxxxxx
xxx
xxxx
xxxxxxx
xxxxxx
xxxxxxxxxxxxx
xxxxxxxxx
xxxxxxxxx
xxxxxxxxxxxx
xxxxxx
xxxxxx
xxxxxxxxxxxxxxxx
xxxxxxxxxxxxxx
xxxxx
xxxxxx
xxxxxxxxxxxx
xxxxxxxxxxxxxx
xxxxxxxxx
xxxxxxx



$(document).ready(function () {

/* start Datatable */
var oTable = $('#BCDtable').dataTable( {

"bAutoWidth": false,
"aoColumnDefs": [
{ "sWidth": "50px", "aTargets": [ "_all" ] }
//{ "sClass": "test_class", "aTargets": [ "_all" ] }
//{ "sTitle": "Title", "aTargets": [ "_all" ] }
] ...

allan

Hi jwmonteith,

If you use Webkit's Inspector, or Firebug or whatever, to view the live DOM from your example, what do you see the width CSS style is applied as? I've just tried it, and it correctly gives me 50px. The size isn't actually 50px due to other factors (I have width: 100% on the table for example) but the basic idea I believe is correct.

Can you link us to an example where this does not work please?

Allan

jwmonteith

Thanks for your comments Allan. I trimmed down the code to make a simple example. Below is the code. Upon inspecting the CSS style that is applied using Firebug, I do see 300px for each column, but the executed code produces columns that are uniform in width, but not 300px. In fact they are much less in width than 300px. My concern is that I'm unable to obtain the desired column widths of my choosing. If I ask for 300px for a column, then I would hope to get a column that is 300px wide.

.data_table {
font-family: helvetica;
font-size: 8.5px;
}
#top_of_page {
position: absolute;
}
#main_table_area {
position: absolute;
top: 50px;
height: 540px;
width: auto;
overflow: auto;
}





top of page






Column1
Column2
Column3





<!--- write table row --->

column1 Data
column2 Data column2 Data
column3 Data column3 Data column3 Data







$(document).ready(function () {

/* start Datatable */
var oTable = $('#TESTtable').dataTable( {

"bAutoWidth": false,

"aoColumnDefs": [
{ "sWidth": "300px", "aTargets": [ "_all" ] }
]
});
/* end Datatable */
});

allan

It's good that the 300px is applied to the columns individually - the rest it more or less up to the browser. Is there a constraint on the table layout that would stop it from taking up 900px (for example it might be in a 800px container). Can you give us a link to a working example of this not working properly - which will make it much easier to track down what is happening.

Allan

jwmonteith

Allan,

Below is example html file. All you would need to do is adjust script lines for your location of jQuery and Datatables. When I run this code, the columns remain uniform in width, but not 300px. When inspecting the width CSS style, I am seeing 300px.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Test for Datatables






$(document).ready(function () {

/* start Datatable */
var oTable = $('#TESTtable').dataTable( {

"bAutoWidth": false,

"aoColumnDefs": [
{ "sWidth": "300px", "aTargets": [ "_all" ] }
]
});
/* end Datatable */
});



.data_table {
font-family: helvetica;
font-size: 8.5px;
}
#top_of_page {
position: absolute;
}
#main_table_area {
position: absolute;
top: 50px;
height: 540px;
width: auto;
overflow: auto;
}







top of page






Column1
Column2
Column3




column1 Data
COLUMN2 DATA COLUMN2 DATA
column3 Data column3 Data column3 Data



column1 Data
COLUMN2 DATA COLUMN2 DATA
column3 Data column3 Data column3 Data



column1 Data
COLUMN2 DATA COLUMN2 DATA
column3 Data column3 Data column3 Data

allan

The problem is the floating elements are affecting the layout - rather than the width's not being correctly applied. Simply add this "table { clear: both }" to your CSS and it should work okay :-)

Regards,
Allan

jwmonteith

It works! Thanks for all your help with this issue Allan. Really appreciate it!

Eric_DeCoff

Allan,

Has this issue been resolved?

Can you point to an example?

gdoermann

I had this issue and it had to do with having inputs for individual column filters. I ran table.find('input,select').css('width', '5px') before I instantiated the table. Afterwards I made them width 100% with table.find('input,select').css('width', '100%'). This worked perfectly!

compsult

gdoermann, thanks for pointing to the column filters in the footer, they were the culprit for me.

I changed my table.display css, adding
width: 1px;

so it now looked this
[code]
table.display tfoot th {
padding: 3px;
border-top: 1px solid black;
font-weight: bold;
width: 1px;
}
[/code]

now when I set narrow column widths (less than 90px), they show up as speciified