Header and data column width mismatch with "border-collapse: collapse" and "sScrollX": "100%"

kk2

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);
});

kk2

Hi,

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.

jaydge

It would be nice if the developer would address this issue, since most tables on the 'net use "border-collapse: collapse" today for the hairline border it gives.

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).

allan

The are a number of other threads that also look into this particular issue. I completely agree that it would be good to fix this, but at the moment I have absolutely no idea how to do that. The problem is a combination of sub pixel rendering and the border collapse being applied differently on different tables based on the content.

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