Jquery - select2 in table td element

Hello, I have a table where the td elements can be edited online (double click and an input element is added so that the cell can be edited). I have some columns where it is necessary to have a list of predefined values and where I want to use the library "select2". This is the part of the code where I add the input or select elements according to the column where the user has double clicked:

if(tipo !== "checkbox" && !$(this).find("input, select").hasClass('editbox')) {
if(columna === 'distrito_contacto') {
    $(this).html('<select class="editbox"></select>');
    $('.editbox').select2({
        placeholder: "Distrito...",
        allowClear: true,
        width: '100%',
        theme: 'bootstrap',
        ajax: {
            url: "php/listaOpciones.php?tabla=distrito&columna=distrito",
            dataType: 'json',
            delay: 250,
            language: 'select2-es',
            data: function (params) {
                return {
                    valor: params.term,
                    page: params.page
                };
            },
            processResults: function (data) {
                return {
                    results: data
                };
            },
            escapeMarkup: function (markup) {
                return markup;
            },
            cache: true
        },
        minimumInputLength: 0
    });
}                               
else $(this).html('<input type="' + tipo + '" class="editbox" value="' + origContent +'" />');

This is an image of the result:

The problem occurs when the select2 element is added, the container of the same "jumps" from the position where it should be and additionally does not work correctly. Thanks in advance for any help you can give me.