Method .html () changes the length of my cell

my problem is as follows I have an option within a table to disable and enable a group but I only use it with a text that changes when I click, this I control from javascript with the following function:

    var param1 = $(this).closest('tr').find('th:eq(0)');
    var texto1 = $(this).closest('tr').find('th:eq(0)').text().toString();

    var texto2 = texto1.trim(texto1);

    if(texto2 === "Deshabilitado"){ 
        var div_hab = "<i id='estatus'  aria-hidden='true'> Habilitado</i>";
        param1.html(div_hab);
        param1.attr('class', 'fa fa-unlock');

    }

And vice versa .... The fact is that by clicking on the option to disable / enable the format of the cell, it is undone leaving this:

link

to this: link

I have already delimited the length of each column in this way:

                <th width="15%">Clave Grupo</th>
                <th width="35%">Materia</th>
                <th width="10%">Alumnos Inscritos</th>
                <th width="20%">Estatus</th>
                <th width="20%">Ver lista</th>

and the cell of the option is like this:

<th><i id="estatus" class="fa fa-unlock-alt text-center" aria-hidden="true"> Habilitado</i></th>

I do not know if anyone could help me solve this problem Greetings.