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

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