How to eliminate border-top on DataTables table?

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

.jodadev. pro asked 5 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?

Add comment

Tina Meadors pro answered 5 years ago

1 0 Best answer

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;
}

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

.jodadev.

Pro User 41Support score
15Questions 1Answers 1Snippets