CSS bug with Bootstrap

[Misiu]

Open http://datatables.net/extensions/keytable/examples/styling/bootstrap.html and select third column in first row (Tokyo).
You should see something like this:

(notice header border over cell selection border)
when it should look like this:

As You can see I've unchecked below CSS:

table.table-bordered.dataTable {
    border-collapse: separate !important;
}

I'm not sure it this change won't affect other extensions, I checked FixedHeader and without that CSS it look better (in my opinion)
Could You please look at this in Your free time?
Thank You.

[DataTables]

Thanks for the bug report. Unfortunately using border-collapse: collapse, which Bootstrap does by default, makes the column width calculations virtually impossible when scrolling is active in the DataTable.

I feel that this is really a Chrome rendering bug, since the outline shouldn't be have the border displayed on top of it. But that would need confirmation from the Chrome folks. I'll open a bug when I get a chance to get feedback from them.

[Misiu]

Sorry I didn't mentioned that before, but I checked that in Chrome 44 and IE11 (tested on Win8.1x64).
Same thing on Firefox 33 and 40 on Win7x64

[DataTables]

Maybe not Come specific then :-(. If you aren't using scrolling you can safely remove that code. If you want to use scrolling, it is needed (particularly in Firefox).

[Misiu]

Allan do You mean scroller plugin? I tried it and after removing that CSS rule it worked fine.

[DataTables]

No - the scrollX or scrollY options in DataTables (although Scroller does require scrollY). The results are unpredictable - I've never been able to get collapse to work reliably with column widths. You take the width of each column, sum them up and get something that is not the same as the table width!

[DusanSenior]

The issue can be probably fixed by z-index property added to dataTables.bootstrap.css like:

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
cursor: pointer;
position: relative;
z-index: -999;
}
and maybe somewhere else.
Is it acceptable solution?
Dusan

[DataTables]

Not sure about the idea of using z-index to address this as it might cause other layout issues in modals etc. But thanks for posting the suggestion - others might find this workaround useful.

[Misiu]

@DusanSenior I've tried Your solution on KeyTable example page, but after z-index header disappeared (tried -1 and -999):

[DusanSenior]

Strange, I have used Chrome, it works fine, but it doesn't work in IE, although header is visible but completely not orderable. I agree, it is not good idea. I also need to solve it, I will find ...

[DusanSenior]

There is outline-offset property allowing move box inside of the td element, but it is not supported by IE and Edge. So I have decided use background color instead of outline
file keyTable.bootstrap.css:

table.dataTable th.focus,
table.dataTable td.focus {
background-color: rgba(51, 122, 183, 0.22)
}

or use keys.className option

[DataTables]

It seems that Edge does now support outline-offset, however, that isn't really enough. What I've done is to switch KeyTable to use box-shadow (inset) as that is more consistently supported.