javascriptdatatablescrollableprimereact

Problem double borders in primereact datatable

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

Solution

  • 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.