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.
Add a comment
|
5 Answers
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/
6 Comments
d3bug
My datable have no footer (tfoot) i tried your css but the horizontal line in the bottom is still visible.
davidkonrad
You must show exactly what dataTables setup you have - there are dozens of ways, it is hard to guess. The above is on standard setup, you seem to perhaps use the bootstrap plugin?
rey_coder
Consider a scenario where you have more than one dataTable and you only need to remove the border on a specific table, what is the element selector that one needs to use? e.g if
<table id="mydataTable" datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstanceCallback" class="mydataTables"></table> using #mydataTable thead th{} or .mydataTables thead th{} in css doesn't seem to select the dataTable.davidkonrad
@rey_coder, use
#mydataTable.dataTable thead th etc, see update.rey_coder
@davidkonrad, I am using angular datatables . and i have realized a div wrapper created around the table which takes the table id and appends '_wrapper' to form its id leaving the table element without an id. thus for me it had to be something like
#example1_wrapper .datatTable thead th{border-bottom:0;} Thanks. |
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;
}
Comments
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:
1 Comment
d3bug
Thanks! I already removed the border line by using this css table.dataTable thead th, table.dataTable thead td { border-bottom: none!important; } the only left now is the bottom horizontal line.
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;
}
1 Comment
Nico Haase
Please add some explanation to your answer such that others can learn from it
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 :)
