Rounded corners needed for the Primefaces datatable.

Nethra

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I have a primefaces datatable which get the data filled dynamically. The last row of the table has sharp edges. I want the last row of the datatable to have rounded edges. How can this be achieved.
Tried approaches by adding border-radius to ui-datatable-tablewrapper and also to the last child of the last row of the table.
When border-radius style is applied to ui-datatable-tablewrapper the corners become transparent without a border. How to make it a proper rounded corner.

allan

Happy to take a look at a test case showing the issue so I can see if I can offer some help.

Allan

Nethra

Thank you for the quick response!
Attaching how my table looks like. Below is the type of datatable that I have where the bottom left and right corners are not rounded. Applying border radius style to the datatable is not creating rounded corners.

allan

Unfortunately I can't debug CSS in an image. If you can create a test page showing the issue I can take a look into it.

Allan

RichardD2

As per this StackOverflow thread, adding border-collapse to a table means the border-radius will be ignored.

You can either apply the rounded corners to a wrapper element, or use box-shadow to draw the table border.

Eg:

#example {
  border-radius: 0 0 20px 20px;
  box-shadow: 0 0 0 1px #666;
}

https://live.datatables.net/gegipajo/1/edit?css,output

Nethra

Thank you so much for the suggestion. The above solution worked. I was able to achieve the rounded corner for the bottom left corner by modifying the box-shadow style according to my requirement. But for the bottom right corner, the border seems to be incomplete. Any idea how to make it a complete border. Adding border-right is not fixing it.

#id .ui-datatable-data > tr:last-child > td:first-child {
  border-bottom-left-radius: 10px !important;
  box-shadow: 0 0 0 0.9px #a8a8a8, 0px 0px 0 0 #a8a8a8 !important;
  border-left: none !important;
  border-bottom: none !important;
  border-right: none !important;
}

#id .ui-datatable-data > tr:nth-last-child(2) > td:first-child {
    border-bottom: none !important;
}

//for the bottom right corner.
#id .ui-datatable-data > tr:last-child > td:last-child {
  border-bottom-right-radius: 10px !important;
  box-shadow: 0 0 0 0.9px #a8a8a8, 0px 0px 0 0 #a8a8a8 !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

Can you please suggest possible ways for fixing it?

bur

You should be able to set the radius on the container rows instead:

    .dt-container .row:last-child {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
    }

Edit: I'm still using DT 2.2.1, it seems the class name was changed in 2.2.2 from row to dt-layout-row.

RichardD2

That's odd - applying those styles to the example doesn't produce an incomplete border for me:

https://live.datatables.net/gegipajo/4/edit?css,output

Are you able to create a test case to reproduce the problem?

allan

I'm still using DT 2.2.1, it seems the class name was changed in 2.2.2 from row to dt-layout-row.

You were probably using the Bootstrap integration where the classes are row.

The classes for the layout haven't changed between 2.2.1 and 2.2.2.

Allan

bur

You were probably using the Bootstrap integration where the classes are row.
The classes for the layout haven't changed between 2.2.1 and 2.2.2.

Ah, I see, that's why the class names are different in the test case. Yes, I upgraded to 2.2.2 just now and I see now that they've remained the same.