Column width does not work with search filter

NoBullMan

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
When I set column widths in columnDefs, it works fine, once I set autoWidth to false.
When I add column filter row, it applies width definitions to column filter row only and for the header itself, it ignores them and just divides table width by number of columns and set each column's width to that value. Any way to get around this issue?

    $(document).ready(function () {
        ...
        // Table Column Filtering Setup
        $('#myTable thead tr')
            .clone(true)
            .addClass('filters')
            .appendTo('#myTable thead');

        bindTable();

    function bindTable() {
        myTable = $("#myTable").DataTable({
            ...
            columnDefs: [
                {
                    targets: [0],
                    width: "13%"
                },
                {
                    targets: [1],
                    width: "10%"
                },
                ...
            ]

When I check generated code:

<tr role="row">
    <th style="width: 126px;" class="sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="EDL: activate to sort column ascending">EDL</th>
    <th style="width: 126px;" class="blah sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="Item ID: activate to sort column ascending">Item ID</th>
</tr>

<tr class="filters" role="row">
    <th style="width: 13%" rowspan="1" colspan="1"><input type="text" placeholder="EDL"></th>
    <th style="width: 10%" rowspan="1" colspan="1"><input type="text" placeholder="Item ID"></th>
</tr>

kthorngren

You can use CSS for the inputs. See if this thread helps.

Kevin

NoBullMan

Thank you Kevin.
using

thead input {
    width: 100%;
}

fixed the issue.