Missing borders in version 2+ with Bootstrap 5
Missing borders in version 2+ with Bootstrap 5
havardlokken
Posts: 3Questions: 1Answers: 0
After upgrading to v.2* several borders were missing in my tables styled with BS5. Tables are styled with "table table-sm table-bordered". After some research I found out it was related to Datatables CSS, where table.dataTable had the style border-collapse: separate. I changed this back to collapse: collapse as in BS, and my borders reappeared.
I have downloaded bundled and minified js and css where BS5 was checked as styling framwork.
This was no problem with versions prior to 2. Am I the only one having problems with this?
This question has an accepted answers - jump to answer
Answers
I built a simple test case with DT 2 and BS 5 styling framework selected:
https://live.datatables.net/valemeqi/1/edit
The example seems to work with
table table-sm table-bordered. Let us know if the test case I provided isn't working correctly. Or possibly you can update it or provide a link to a test case to show the issue you are having.https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I'm wondering if you've got some kind of mix of DataTables 1.x and 2.x. The 2.x CSS for Bootstrap 5 integration does not use
border-collapse: separate.Allan
Thank you very much for quick response!
I have downloaded a fresh version from your downloader right now, and the same css is present in the downloaded files, border-collapse: separate;
Before downloading, I checked BS5 as styling framwork and the following extensions which also was listed up in the css-file: DataTables 2.0.8, FixedColumns 5.0.1, FixedHeader 4.0.1, Responsive 3.0.2, Select 2.0.3, StateRestore 1.4.1.
I prefer to download and serve from my own site because it still works when I'm offline with my developing laptop.
Thank you for the extra information. It is coming from FixedColumns' CSS.
I've got a note in the comments there stating that due to this Chrome bug and this Firefox bug it isn't possible to use
border-collapse: collapse;along withposition: stickywhich is used to hold the cells in place when scrolling.In old versions of FixedColumns I cloned elements and positioned them floating on the table, which had the advantage of avoiding this issue, but it caused all sorts of other issues (event handlers, dynamic data, etc). It also dramatically increased the code size. Position sticky was meant to solve all that, but I'm recalling now how frustrated I was when I found this exact issue.
I don't have a fix I'm sorry to say, as the problem comes from the rendering engines. All I can suggest is that you vote for those bugs and hopefully they will get fixed...
Allan
Thanks again, I'll drop FixedColumns in favour of table borders :-)