Data table headers wider than child rows
Data table headers wider than child rows
We've noticed that the headers in several data tables we've published lately are wider than the cells underneath them. As a result, the sorting icons overhang the column to the right by a few pixels. Here's an example:
http://usat.ly/tRM0nD
I believe the problem is related to the vertical scrollbar but haven't been able to figure out how to change it, and the vertical scrollbar example on the DataTables site doesn't appear to have this problem.
In case it helps, here is my initialization code:
[code] var oCoachTable = $('#coaches').dataTable({
"bProcessing": true,
"aaSorting": [[2, 'asc'], [1, 'asc']],
"sScrollY": "435px",
"bPaginate": false,
"sDom": "lrft",
"bAutoWidth": false,
"sAjaxSource": "Coaches.js",
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "Coach", "iDataSort": 2, "sWidth": "127px" },
{ "mDataProp": "CoachLName", "bVisible": false },
{ "mDataProp": "School", "sWidth": "155px" },
{ "mDataProp": "Conf" },
{ "mDataProp": "SchoolPay", "sClass": "number-align", "sType": "formatted-num", "sWidth": "90px", "asSorting": ["desc", "asc"] },
{ "mDataProp": "OtherPay", "sClass": "number-align", "sType": "formatted-num", "sWidth": "80px", "asSorting": ["desc", "asc"] },
{ "mDataProp": "TotalPay", "sClass": "number-align", "sType": "formatted-num", "sWidth": "79px", "asSorting": ["desc", "asc"] },
{ "mDataProp": "MaxBonus", "sClass": "number-align", "sType": "formatted-num", "sWidth": "88px", "asSorting": ["desc", "asc"] }
]
});[/code]
One other thing: We have a line in our CSS to set the width of ScrollHeadInner to 100 percent. I'm sure this is causing the problem, but if we don't include this line, then when you click one of the other tabs in the table, the headers are much narrower than the table. What's odd is: The first time you sort either of these tables, the headers snap to the proper widths. We have never been able to figure out a way to get the widths to load initially and hardcoded the width of ScrollHeadInner as the best workaround we could come up with.
Does anyone have any suggestions?
Thank you,
chris
http://usat.ly/tRM0nD
I believe the problem is related to the vertical scrollbar but haven't been able to figure out how to change it, and the vertical scrollbar example on the DataTables site doesn't appear to have this problem.
In case it helps, here is my initialization code:
[code] var oCoachTable = $('#coaches').dataTable({
"bProcessing": true,
"aaSorting": [[2, 'asc'], [1, 'asc']],
"sScrollY": "435px",
"bPaginate": false,
"sDom": "lrft",
"bAutoWidth": false,
"sAjaxSource": "Coaches.js",
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "Coach", "iDataSort": 2, "sWidth": "127px" },
{ "mDataProp": "CoachLName", "bVisible": false },
{ "mDataProp": "School", "sWidth": "155px" },
{ "mDataProp": "Conf" },
{ "mDataProp": "SchoolPay", "sClass": "number-align", "sType": "formatted-num", "sWidth": "90px", "asSorting": ["desc", "asc"] },
{ "mDataProp": "OtherPay", "sClass": "number-align", "sType": "formatted-num", "sWidth": "80px", "asSorting": ["desc", "asc"] },
{ "mDataProp": "TotalPay", "sClass": "number-align", "sType": "formatted-num", "sWidth": "79px", "asSorting": ["desc", "asc"] },
{ "mDataProp": "MaxBonus", "sClass": "number-align", "sType": "formatted-num", "sWidth": "88px", "asSorting": ["desc", "asc"] }
]
});[/code]
One other thing: We have a line in our CSS to set the width of ScrollHeadInner to 100 percent. I'm sure this is causing the problem, but if we don't include this line, then when you click one of the other tabs in the table, the headers are much narrower than the table. What's odd is: The first time you sort either of these tables, the headers snap to the proper widths. We have never been able to figure out a way to get the widths to load initially and hardcoded the width of ScrollHeadInner as the best workaround we could come up with.
Does anyone have any suggestions?
Thank you,
chris
This discussion has been closed.