Jquery datatables remove horizontal line

Question

Need help, I'm trying to remove the horizontal line in jQuery Datatables.

Please see screenshot below: I'm trying to find the line using google chrome element inspector but no luck.

Answer 1

Those distinct lines is rendered by the <th> elements in <thead> and <tfoot>. Use

table.dataTable thead th {
  border-bottom: 0;
}
table.dataTable tfoot th {
  border-top: 0;
}

...to remove them. Demo -> http://jsfiddle.net/dgsccstp/ try comment out the CSS and re-run.

---

If you not have specified any footer, ie not having a <tfoot></tfoot> section, remove the bottom line this way :

table.dataTable.no-footer {
  border-bottom: 0;
}

---

If you have multiple DataTables and only want to remove the borders of one (or more) specific table, replace table with the table #id as selector :

#example1.dataTable thead th {
  border-bottom: 0;
}
#example1.dataTable tfoot th {
  border-top: 0;
}

demo -> http://jsfiddle.net/Ljortyx8/

Answer 2

I'm not using the tfoot so the dark line at the end of the table is generated in the tbody. I have removed it adding this CSS code:

table.dataTable {
  border-collapse: collapse;
}

Answer 3

it is in css:

table.dataTable.display tbody td

It is the border top:

border-top: 1px solid #ddd;

for each cell.

or only for the header:

in the css:

<thead>
 <th>
  <td>
Td property:
border-bottom: 1px solid #111;

To test it you can uncheck property in css inspector.

for me it works, as you can see: