Выровняйте текст и кнопку внутри td на основе длины этого текста

Question

У меня есть таблица, в которой я повторяю некоторые записи базы данных, в основном, я получил td, где я помещаю текст (соответствующий статусу каждой записи) и кнопку, которая открывает детали этой записи, например:

{% for item in records %}
    <tr>
        <td>
            {{ item.status }}
            <button type="button" class="btn btn-default btn-flat btn-xs btn_request_detail" data-toggle="tooltip" data-original-title="Ver detalle" code = "" data-url="{% url 'unbinding:management_detail' item.id %}" >
                <i class="fa fa-info-circle fa-md text-light-blue"></i>
            </button>
        </td>
    </tr>
{% endfor %}

Когда все записи имеют одинаковый текст статуса, весь столбец выравнивается идеально, но если какой-либо из этих текстов статуса изменяется по длине, кнопка перемещается вправо, и я теряю выравнивание.

Есть ли способчто кнопки располагаются вертикально в таблице на основе длины текста ??

Заранее спасибо !!

Answer 1

Вы пытались переместить вашу "cta" (кнопку) в новый столбец?

Я думаю, вы должны это сделать.

Пожалуйста, попробуйте это:

{% for item in records %}
    <tr>
        <td>
            {{ item.status }}
        </td>
        <td>
            <button type="button" class="btn btn-default btn-flat btn-xs btn_request_detail" data-toggle="tooltip" data-original-title="Ver detalle" code = "" data-url="{% url 'unbinding:management_detail' item.id %}" >
                <i class="fa fa-info-circle fa-md text-light-blue"></i>
            </button>
        </td>
    </tr>
{% endfor %}

PS.не забудьте добавить еще одну или к вашей голове стола.