How to style Inline Editing with Bootstrap

Capamania

Hi All,

I'm struggling to style 'Inline Editing'. I'm trying to set the padding of the parent td of DTE_Inline to 0px; . At the moment jquery.dataTables.min.css defines the following:

table.dataTable tbody th, table.dataTable tbody td {
    padding: 8px 10px;
}

<table id="table">
<thead></thead>
<tbody>
    <tr id="row_13" class="odd" role="row">
        <td class="name"></td>
        <td class="text">
            <div class="DTE DTE_Inline">
                <div class="DTE_Inline_Field">
                <div class="DTE_Inline_Buttons"></div>
            </div>
        </td>
    </tr>   
</tbody>    
</table>

I tried to add a class to the parent but that didn't work:

$("div.DTE_Inline").parents('td').addClass("css_DTE_Inline");

$('td:has(.DTE_Inline)').addClass('css_DTE_Inline');

And also css:

table.dataTable th.focus, table.dataTable td.focus {
outline: none;
}

table.dataTable tbody th:focus, table.dataTable tbody td:focus {
padding: 0px;
}

table.dataTable tbody th.active, table.dataTable tbody td.active {
padding: 0px;
}

I'm using DataTable with Editor and Bootstrap. Thats my setup:

/bootstrap.min.css
/jquery-ui.min.css
/jquery.dataTables.min.css
/responsive.bootstrap.min.css
/editor.bootstrap.min.css

/jquery-1.11.3.min.js
/jquery-ui.min.js
/bootstrap.min.js

/jquery.dataTables.min.js
/dataTables.bootstrap.min.js
/dataTables.responsive.min.js
/responsive.bootstrap.min.js
/dataTables.buttons.min.js
/buttons.bootstrap.min.js
/dataTables.editor.min.js
/editor.bootstrap.min.js

How can I change the sytling of the td so I won't have the padding as in the picture when I inline edit? Many thanks.

Capamania

So this adds a class ... but only for the first row to click on ... not if click on further cells in other rows.

var inline_edit = $('#table').on( 'click', 'td:not(:first-child)', function (e) {
    editor.inline( this );

     $("div.DTE_Inline").parents('td').addClass("css_DTE_Inline");

    } ); 

Somebody an idea why?