Annoying horizontal scrollbar when using bScrollInfinite and table borders

daokfella

I want a grid styled with a 1px border. I used this simple "grid" css class:

[code]
table.grid { border-collapse:collapse; font-size:.8em; }
table.grid td { padding:.3em; border:1px solid #EDEDED; border-bottom:1px solid #ccc; }
[/code]

However, once I include the border, I get an unnecessary horizontal scrollbar in the scrollbody viewport of the DataTable when I enable infinite scrolling. I'm guessing the width ends up being 100% plus one pixel. Is there a simple fix to this? I really don't want to do the following even though it works:

[code]
.dataTables_scrollBody {
*margin-top: -1px;
-webkit-overflow-scrolling: touch;
overflow-x:hidden !important;
}
[/code]

allan

Remove border-collapse: collapse and it will work fine ( http://live.datatables.net/eliwej/edit#javascript,html ). Border collapse makes really odd things happen with column width calculations.

See this post from me for how to get the border collapse effect without actually using collapse: http://datatables.net/forums/discussion/9349/whitespace-between-table-and-vertical-scrollbar-in-ie6-and-ie7/p1#Item_7

Allan