How to eliminate border-top on DataTables table?


Topic: How to eliminate border-top on DataTables table?

.jodadev. pro asked 3 years ago

Hello,

I'm using datatables and displaying the child-row. The issue is that the child-row has a border-top that makes the table look bad, I'm wondering how can I remove it? I tried this code but is not working.

.table td .table td {
    border-top: none !important;
}

Here is how I want the child row to look like: https://datatables.net/examples/api/row_details.html Click one of the + row so you can see how it doesn't have the border-top and looks nicer.

Here is a snippet showing the border-top on the child-row: https://mdbootstrap.com/snippets/jquery/jonathan-2/1084811?view=side#css-tab-view. Click one of the + to see what I'm talking about.

Any idea on how to fix this?


Tina Meadors pro answered 3 years ago

There may be other/easier ways of referencing the row (giving it an ID, etc), but this should do the trick to get rid of the border - and the extra padding - on just the top child row.:

td table tr:first-child td {
    border-top: none !important;
    padding-top: 0 !important;
}

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.7
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes