How to remove a border

How to remove a border

CountLessQCountLessQ Posts: 33Questions: 9Answers: 0

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)" />');
            });

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Colin

  • CountLessQCountLessQ Posts: 33Questions: 9Answers: 0
  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • CountLessQCountLessQ Posts: 33Questions: 9Answers: 0

    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

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    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

This discussion has been closed.