Please help me the border color is wrong

Please help me the border color is wrong

nhanlaptrinhnhanlaptrinh Posts: 13Questions: 3Answers: 0

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.

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

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

    Allan

  • nhanlaptrinhnhanlaptrinh Posts: 13Questions: 3Answers: 0

    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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • nhanlaptrinhnhanlaptrinh Posts: 13Questions: 3Answers: 0
    edited January 6
  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

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

    Allan

  • nhanlaptrinhnhanlaptrinh Posts: 13Questions: 3Answers: 0

    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.

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Answer ✓

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Answer ✓

    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

  • nhanlaptrinhnhanlaptrinh Posts: 13Questions: 3Answers: 0

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

Sign In or Register to comment.