CODEWITHSUNDEEP
jquerydatatables
d3bug
d3bug

Reputation: 149

Jquery datatables remove horizontal line

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

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

Upvotes: 10

Views: 15331

Answers (5)

Akalanka Imesh
Akalanka Imesh

Reputation: 56

these are the default style selectors of datatables . those line apear because of border bottom property..

in below css I overided boder bottom property with none ! with important. 

table.dataTable thead th {
  border-bottom: none !important;
}
table.dataTable.no-footer {
  border-bottom: none !important;
}

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85568

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/

Upvotes: 12

skeptic
skeptic

Reputation: 83

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

Upvotes: 4

d3bug
d3bug

Reputation: 149

If your data table doesn't have a footer (because of your configuration options) @davidkonrad's solution won't work. However, you can still use that solution if you add a footer, and then hide it using CSS :)

Upvotes: -1

Destrif
Destrif

Reputation: 2134

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: enter image description here

Upvotes: 1

Related Questions