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