DataTable css issues
DataTable css issues
I just started using dataTable on the website im working for and it seems to work great aside from a few minor issues that throw the whole thing off. It is the newest version of datatables and I am using IE 9. The link to the page I am using it on is http://www.ocrcalendar.com/dataTable.php
The first problem is that the first column of the table is being expanded to fit the screen while every other column remains normal size. I need the table to expand to the width of the screen and have each column change width by a uniform amount.
The second problem is that the header columns don't exactly match up with the body columns and the header seems to be seperated from the body by a small margin that I cannot get rid of. I am not sure if this is a seperate problem to the first or if they could both be fixed by one solution.
The third problem is sorting, it seems to sort the words into alphabetical order fine but when I try to sort any numbers with more than 2 digits such as the prices or people it seems to only sort by the first digit and ignore the rest. I have tried many times to include a sort by type plug-in to get the price working but the only result is either breaking the whole table or having the column not sort at all anymore. If someone could try to explain exactly how to get the plug-ins to work I feel like I could solve all the sorting issues, it seems like a simple thing to implement but for some reason it wont work for me. Thanks for any help hopefully I can get this working the way I want soon !
The first problem is that the first column of the table is being expanded to fit the screen while every other column remains normal size. I need the table to expand to the width of the screen and have each column change width by a uniform amount.
The second problem is that the header columns don't exactly match up with the body columns and the header seems to be seperated from the body by a small margin that I cannot get rid of. I am not sure if this is a seperate problem to the first or if they could both be fixed by one solution.
The third problem is sorting, it seems to sort the words into alphabetical order fine but when I try to sort any numbers with more than 2 digits such as the prices or people it seems to only sort by the first digit and ignore the rest. I have tried many times to include a sort by type plug-in to get the price working but the only result is either breaking the whole table or having the column not sort at all anymore. If someone could try to explain exactly how to get the plug-ins to work I feel like I could solve all the sorting issues, it seems like a simple thing to implement but for some reason it wont work for me. Thanks for any help hopefully I can get this working the way I want soon !
This discussion has been closed.
Replies
Next, there are widths being applied with in-line styles. It's hard to say what kind of havoc that might wreak on the table as a whole.
Most importantly, though... the header seems to be a separate table from the body. I wouldn't worry about the rest of your CSS until you generate this table as one table. It's the way to go in order to ensure that the body columns line up with the header columns (which is one of the issues you mentioned).
The best foot forward is to make a single table, use only 'naked' TH, TR, and TD tags (no classes or inline styles), and work from there. Once that's out of the way, it'll be a lot easier to make the next recommendations.
It is most definatley one table seperated by and tags, for some reason the header is just raised above the body by a litle space. Regarding the in-line styles I am aware that they often mess the table up but it looks the same without them and I only added them as a last ditched effort to get it to display the way I wanted.
If you could give me any more tips on how to get it displaying properly I would be very grateful, please have a look at the scource code and look around a bit if that would help find a solution.
As a rendered DOM, there are two tables. I have to admit, it hadn't occurred to me that this might be something that some of the functionality (sScrollyY?) does intentionally and automatically, so I might be barking up the wrong tree.