Header and data column width mismatch with "border-collapse: collapse" and "sScrollX": "100%"
Header and data column width mismatch with "border-collapse: collapse" and "sScrollX": "100%"
kk2
Posts: 2Questions: 0Answers: 0
Dear Allan,
I have a table with border-collapse: collapse and "sScrollX": "100%".
The header columns do not match with the data columns.
When I remove either of the above 2 settings, the columns will match correctly.
Basically, I want a table with a collapsed 1 pixel border around each cell and enable horizontal scroll.
One workaround is to remove border-collapse and draw the border only once for each side.
Thanks for your help,
KK.
**************************************
table.display {
margin: 0 auto;
clear: both;
width: 100%;
border: 0;
border-spacing: 0;
border-collapse: collapse;
}
table.display thead th {
padding: 3px 18px 3px 10px;
border: 1px solid red;
border-bottom: 0;
color: #ff0000;
font-size: 12px;
font-weight: bold;
cursor: pointer;
* cursor: hand;
}
table.display td {
border: 1px solid red;
padding: 3px 10px;
color: #000000;
font-size: 12px;
font-weight: normal;
}
**************************************
$(document).ready(function(){
var tbl = $('#example').dataTable( {
"aoColumns": [
{ "sTitle": "C1", "mDataProp": "c1" },
{ "sTitle": "C2", "mDataProp": "c2" },
{ "sTitle": "C3", "mDataProp": "c3" },
{ "sTitle": "C4", "mDataProp": "c4" },
{ "sTitle": "C5", "mDataProp": "c5" },
{ "sTitle": "C6", "mDataProp": "c6" },
{ "sTitle": "C7", "mDataProp": "c7" },
{ "sTitle": "C8", "mDataProp": "c8" },
{ "sTitle": "C9", "mDataProp": "c9" },
{ "sTitle": "C10", "mDataProp": "c10" },
],
"bPaginate": false,
"sScrollX": "100%",
"bSort": false,
"bSortClasses": false
} );
var data = [ //any long data anywhere will cause the mismatch columns
{"c1": "AAAAAAAAAAAAAAAAAAAA", "c2": "A", "c3": "A", "c4": "A", "c5": "A", "c6": "A", "c7": "A", "c8": "A", "c9": "A", "c10": "A"},
{"c1": "A", "c2": "A", "c3": "A", "c4": "A", "c5": "A", "c6": "A", "c7": "A", "c8": "A", "c9": "A", "c10": "A"},
{"c1": "A", "c2": "A", "c3": "A", "c4": "A", "c5": "A", "c6": "A", "c7": "A", "c8": "A", "c9": "A", "c10": "A"},
]
tbl.fnClearTable();
tbl.fnAddData(data);
});
I have a table with border-collapse: collapse and "sScrollX": "100%".
The header columns do not match with the data columns.
When I remove either of the above 2 settings, the columns will match correctly.
Basically, I want a table with a collapsed 1 pixel border around each cell and enable horizontal scroll.
One workaround is to remove border-collapse and draw the border only once for each side.
Thanks for your help,
KK.
**************************************
table.display {
margin: 0 auto;
clear: both;
width: 100%;
border: 0;
border-spacing: 0;
border-collapse: collapse;
}
table.display thead th {
padding: 3px 18px 3px 10px;
border: 1px solid red;
border-bottom: 0;
color: #ff0000;
font-size: 12px;
font-weight: bold;
cursor: pointer;
* cursor: hand;
}
table.display td {
border: 1px solid red;
padding: 3px 10px;
color: #000000;
font-size: 12px;
font-weight: normal;
}
**************************************
$(document).ready(function(){
var tbl = $('#example').dataTable( {
"aoColumns": [
{ "sTitle": "C1", "mDataProp": "c1" },
{ "sTitle": "C2", "mDataProp": "c2" },
{ "sTitle": "C3", "mDataProp": "c3" },
{ "sTitle": "C4", "mDataProp": "c4" },
{ "sTitle": "C5", "mDataProp": "c5" },
{ "sTitle": "C6", "mDataProp": "c6" },
{ "sTitle": "C7", "mDataProp": "c7" },
{ "sTitle": "C8", "mDataProp": "c8" },
{ "sTitle": "C9", "mDataProp": "c9" },
{ "sTitle": "C10", "mDataProp": "c10" },
],
"bPaginate": false,
"sScrollX": "100%",
"bSort": false,
"bSortClasses": false
} );
var data = [ //any long data anywhere will cause the mismatch columns
{"c1": "AAAAAAAAAAAAAAAAAAAA", "c2": "A", "c3": "A", "c4": "A", "c5": "A", "c6": "A", "c7": "A", "c8": "A", "c9": "A", "c10": "A"},
{"c1": "A", "c2": "A", "c3": "A", "c4": "A", "c5": "A", "c6": "A", "c7": "A", "c8": "A", "c9": "A", "c10": "A"},
{"c1": "A", "c2": "A", "c3": "A", "c4": "A", "c5": "A", "c6": "A", "c7": "A", "c8": "A", "c9": "A", "c10": "A"},
]
tbl.fnClearTable();
tbl.fnAddData(data);
});
This discussion has been closed.
Replies
I read in another post that "border-collapse: collapse;" causes problems, so one workaround is not to use it and draw only certain borders so that overall, it seems that the border is only 1 pixel.
Regards,
KK.
The script should not need to assume a 2px border width. In fact, it should work with any border width, even zero border (no lines).
To explain in a bit more detail - lets say I have a table that looks like:
[code]
+--------+--------+---------+--------+
| H1 | H2 | H3 | H4 |
+--------+--------+---------+--------+
| 11 | 12 | 13 | 14 |
+--------+--------+---------+--------+
| 21 | 22 | 23 | 24 |
+--------+--------+---------+--------+
| 31 | 32 | 33 | 34 |
+--------+--------+---------+--------+
[/code]
What DataTables does is to split that into two tables when scrolling is enabled (since it is virtually impossible to get the tbody to scroll on its own in all browsers - hah - I truly wish I could just set overflow:scroll!). So we end up with:
[code]
+--------+--------+---------+--------+
| H1 | H2 | H3 | H4 |
+--------+--------+---------+--------+
+--------+--------+---------+--------+
| 11 | 12 | 13 | 14 |
+--------+--------+---------+--------+
| 21 | 22 | 23 | 24 |
+--------+--------+---------+--------+
| 31 | 32 | 33 | 34 |
+--------+--------+---------+--------+
[/code]
Now DataTables obviously needs to read the width of one of the tables and apply that to the other (this is grossly simplifying what is actually happening, but it boils down to this). So DataTables reads the widths from the 'body' table and applies it exactly to the header.
Should align, since they have the same widths applied right? No - not even close, and this is the problem.
Where the border-collapse actually removes pixels depends on the content of the table (the top one has none - hence the difference). Indeed the way this is done is different in browser.
There are only two solutions I've found for this thus far:
1. Use table-layout: fixed - then what you tell the browser to do with column widths will be what is done. But you loose a lot of flexibility.
2. Use border-top, border-left, border-right, border-bottom without collapsing the borders on the table - this can be used to give exactly the same effect, using a CSS only change. Its naff, but this is my recommended way of getting the 'collapse' effect, until a better method can be found.
Allan