2

I'm using datatable component from primereact. I have a double borders problem with a scrollable talbe.

Here is the sandbox example : https://codesandbox.io/s/primereact-demo-forked-emfgtk?file=/src/App.js

As you can see in browser part, bottom border in header are thicker.

I would like to have simple borders

Izilbeth
  • 23
  • 2

1 Answers1

1

The problem is, that you have a border-bottom and border-top, basically doubling the border width.

The cleanest solution would be to add border-collapse: collapse to the table itself. You can read more about it here.

One solution is to add the following style:

.p-datatable.p-datatable-gridlines .p-datatable-thead > tr:not(:first-of-type) > th {
    border-top: 0;
}

Which basically removes the top-border on all Table-Headers which are not in the first row.

Gykonik
  • 638
  • 1
  • 7
  • 24