How to remove a border

CountLessQ

I followed this tutorial : https://datatables.net/examples/api/multi_filter.html
can i remove the line that separate the header from the input box. I tried border: none !important and other ways but it didn't change. It comes fro this code:
// Setup - add a text input to each footer cell
$('#item tfoot th').each(function () {

                $(this).html('<input type="text" style="color: black" placeholder="(All)" />');
            });

colin

I'm not sure which border you're referring to. Please could you mark it on a screen shot and post back.

Colin

CountLessQ

@colin

colin

That looks non-standard - these are the deafult options here. We're happy to take a look, but please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

CountLessQ

Hi, thank you. Here is a link: http://live.datatables.net/tuxowiku/5/edit
if i remove the input box the line disappear and desired borders show. Thanks again

allan

We have the following in our CSS (modified slightly for brevity here):

table.dataTable thead th {
    border-bottom: 1px solid #111;
}

table.dataTable tfoot th {
    border-top: 1px solid  #111;
}

Since you are using:

        tfoot {
            display: table-header-group;
        }

the bottom order on the header, and the bottom border on the footer are bumping up against each other - thus giving a 2px thick line.

Perhaps you need something like:

table.dataTable thead th {
    border-bottom: none;
}

table.dataTable tfoot th {
    border-top: none;
    border-bottom: 1px solid  #111;
}

Allan