I want complete control over the field width

Karthik

Here are my requirements

- Vertical and Horizontal Scroll
- Complete control over field width
- no-wrap on all columns with table-layout:fixed so my field widths are not ignored

Without the fixed width, when horizontal and vertical scroll are enabled at the same it it's messing up the layout.

Also if I use KeyTable is it possible to only highlight/navigate between specific set of columns?

allan

Hi Karthik,

1. Vertical and horizontal scroll - No problem there: http://datatables.net/examples/basic_init/scroll_xy.html :-)

2. Complete control over field width - A little bit more of a problem... The reason this is a bit of an issue is that table widths are very difficult to get exactly right (to the point of almost impossible when considering border, margins, padding, collapse-broder, cellspacing, content being to wide etc). When using a it is very difficult to say "this cell will be 600px, that one will be 10px etc. What happens if your content is greater than the given width? Likewise if the column header is to big. For these reasons DataTables will attempt to help out with the column widths and set them automatically. You can increase your control of the widths assigned using the 'sWidth' parameter for the columns - but when using scrolling, this can be overruled (although taken into account) to force the columns to align properly.

Now having said that, there are some things you can do to ensure that you have as much control over the width as possible. Firstly, set bAutoWidth: false - that will mean DataTables won't try to do automatic column width optimisation. Also set sWidth for the columns. And if you want as close as possible pixel perfect control, wrap all cell content in a DIV and assign your chosen width to that. You can also set overflow:hidden so long content doesn't break the layout.

3. no-wrap on all columns with table-layout:fixed so my field widths are not ignored

This is a CSS option. You can do something like:

[code]
td {
white-space: no-wrap;
overflow: hidden;
}
[/code]

> Without the fixed width, when horizontal and vertical scroll are enabled at the same it it's messing up the layout.

Can you link me to an example please? Are you seeing a warning message on the console?

4. Also if I use KeyTable is it possible to only highlight/navigate between specific set of columns?

Currently no - there is no option in KeyTable to have it applied to only certain columns. The code block that would need to consider that option is the line with 'case 37: /* left arrow */' - I've added it to my to-do list :-)

Hope this helps!

Regards,
Allan

Karthik

Allan, thanks for the quick response!

I forget to mention, when I listed the requirements the the layout should work while all the requirements are solved at the same time in the same table.

I did build the table solving all the requirements and set AutoWidth to false and value sWidth for every column. But sWidth got overwritten by something else causing my header and main table go completely out of sync. I'll try to post it in a public server.

Thanks for the hint on the Key Table really appreciate it. I'll muck around and see if I can get what I want.

Karthik

Does KeyTable work only with Datatable?

I tried this and it didn't work. MyOwnTable is not a datatable.

var keys = new KeyTable( {
"table": document.getElementById('MyOwnTable')
} );

allan

The function _fnScrollDraw in DataTables will be the one which is causing the column widths to be overwritten - have a look for "nToSize.style.width =" and "nSizer.style.width = ". You could try commenting those lines out and see if they solve the problem that you are seeing - you are obviously supplying the column width information needed - so DataTables might be trying to be too clever for it's own good. The whole _fnScrollDraw function it really just about trying to align the columns! If you wanted to be really brutal with it, you could just add a 'return' at the top of the function and see how that goes!

Regards,
Allan

Karthik

Thank you!!!