FixedColumns losing row borders

FixedColumns losing row borders

Wooly65Wooly65 Posts: 86Questions: 25Answers: 1
edited October 14 in Free community support

Link to test case: No
Debugger code (debug.datatables.net): I don't see a FixedColumns example using the class table-bordered

Just by including the fixedColumns.bootstrap5.css and nothing else I am losing the borders separating my rows.

My table definition:

<table id="taxonomyResultsTable" class="table table-hover table-bordered table-sm nowrap">

Before including fixedColumns.bootstrap5.css

After including fixedColumns.bootstrap5.css


I found if I remove the following the row borders appear, but it causes other issues when scrolling left to right. You can see artifacts behind the fixed columns

table.dataTable {
  border-collapse: separate;
}

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 63,700Questions: 1Answers: 10,501 Site admin

    Trivial example: https://live.datatables.net/sodikicu/1/edit .

    Yes, unfortunately this is a real limitation in browsers between position: sticky (for the fixed columns) and border-collapse: collapse. I don't believe there is a solution for this at the moment. There are a number of bugs on Blink and Firefox about this.

    I am surprised that the top and bottom border for the table isn't appearing there - I need to look into that.

    Allan

  • Wooly65Wooly65 Posts: 86Questions: 25Answers: 1
    edited October 15

    What do you think about this

    table.table.dataTable.table-bordered>tbody>tr>td {
        box-shadow: inset 0 1px 0 var(--bs-border-color);
    }
    

    I got the idea from this stackoverflow question and suggestion.
    https://stackoverflow.com/a/60051223/5359251

    It seems to work on Chrome, Firefox, Edge, Safari

  • Wooly65Wooly65 Posts: 86Questions: 25Answers: 1
    edited October 15

    Here is an image using the css. Looks good to me.

  • Wooly65Wooly65 Posts: 86Questions: 25Answers: 1

    @allan do you think the above css is sufficient or additional dtfc classes should be part of the css?

  • allanallan Posts: 63,700Questions: 1Answers: 10,501 Site admin
    Answer ✓

    That's very clever - I like that!

    That looks like it probably is sufficient. I've added it to my list. Nice one!

    Allan

  • Wooly65Wooly65 Posts: 86Questions: 25Answers: 1

    @allan were you still planning to try and include this in FixedColumns? I see it didn't make it into the 5.04 release (Oct 23).

  • allanallan Posts: 63,700Questions: 1Answers: 10,501 Site admin
    Answer ✓

    Yes, sorry. This is an aspect I've not worked on yet. I'm not sure at what point I'll get to that in the list, but it is something I need to look at. If you have a workaround in your local CSS, I'd suggest continuing to use that for now.

    Allan

Sign In or Register to comment.