FixedColumns losing row borders

Wooly65

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;
}

allan

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

Wooly65

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

Wooly65

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

Wooly65

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

allan

That's very clever - I like that!

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

Allan

Wooly65

@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).

allan

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