Please help me the border color is wrong

nhanlaptrinh

Link image: https://www.mediafire.com/view/j8mx3pqkvbb48v8/img.jpg/file
Link source: https://www.mediafire.com/file/wzthlmosrwu74te/Test.html/file

When I scrollX, scrollY, the borders 'thead', 'tfoot' and 'tbody' are different like the picture, and I can't create the table border color. Anyone who knows please help me. Thank.

allan

Unfortunately, this is a bit of an artifact of how the scrolling works. You can't use border-collapse: collapse for example, which I suspect is the case here.

If you could create a test case on https://live.datatables.net or JSFiddle, I can take a look and see if I can suggest something. Your HTML file is not complete and appears to render okay for me.

Allan

nhanlaptrinh

I followed the link:
https://datatables.net/extensions/fixedcolumns/examples/styling/bootstrap5.html

allan

Which appears to be working okay for me. Can you link to a test case showing the issue please?

Allan

nhanlaptrinh

Adding class 'table-bordered' works correctly on Bootstrap4, but on Bootstrap5 it runs incorrectly. Can anyone help me solve it, because I'm not good at css. Thank you very much.
Link Bootstrap4:
https://datatables.net/release-datatables/extensions/FixedColumns/examples/styling/bootstrap4.html

Link Bootstrap5:
https://datatables.net/extensions/fixedcolumns/examples/styling/bootstrap5.html

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Colin

nhanlaptrinh

Thanks Colin.
https://live.datatables.net/tikaboso/3/edit

allan

The table in your example appears to have a border to me:

Allan

nhanlaptrinh

The blue border on the left is correct, but the right one has no border. The red circle is not aligned properly. I want to make it look as beautiful as Bootstrap 4
https://datatables.net/release-datatables/extensions/FixedColumns/examples/styling/bootstrap4.html
Thank.

allan

The alignment issue could well be caused by that missing right padding. I'm working on various updates at the moment and I've included this in the set to test.

Thanks,
Allan

allan

I made this example to demonstrate some issues with the border rendering in Chrome when used with position: sticky which we do for FixedColumns: https://jsbin.com/qudozupafe/edit?html,css,output .

There is no Javascript on that page, just an HTML table with Bootstrap 5 styling and a little CSS. If you scroll the table, you'll see some odd effects on the left and right borders - particularly that there appears to be about 1px width down the left of the table which is transparent and you can see the rest of the table scrolling under it. I think that 1px shift is the reason the right border isn't showing in the header.

I'm afraid that there isn't much I can realistically do here. Bootstrap could update their styles to support such as case (border-collapse: separate would be needed), or the best solution would be for Chrome to fix the rendering. Firefox has similar, but different (and more) issues. These two issues [1], [2]) are likely related to it.

Allan

nhanlaptrinh

I hope there will be a new update of datatable on Bootstrap 5. Thank you very much admin.