Topic: How to eliminate border-top on DataTables table?
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?
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;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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