根据文本长度对齐 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 %}

附言。不要忘记在您的表头上再添加一个或。