Answers

• allan Posts: 65,287Questions: 1Answers: 10,824 Site admin

  March 5

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

  Allan
• Nethra Posts: 3Questions: 1Answers: 0

  March 6 edited March 6

  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 Posts: 65,287Questions: 1Answers: 10,824 Site admin

  March 6

  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 Posts: 25Questions: 2Answers: 1

  March 6

  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 Posts: 3Questions: 1Answers: 0

  March 10 edited March 10

  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 Posts: 33Questions: 2Answers: 3

  March 10 edited March 10

  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 Posts: 25Questions: 2Answers: 1

  March 10

  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 Posts: 65,287Questions: 1Answers: 10,824 Site admin

  March 10

  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 Posts: 33Questions: 2Answers: 3

  March 10

  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.