Bootstrap 5表格列间距调整：实现部门表列布局匹配流程表

列宽错位、无法和Process表对齐的核心原因：默认表格布局为自动计算宽度，表头Action列设置colspan="2"后，没有为操作列指定固定宽度，浏览器会根据单元格内容自动分配宽度，导致业务列被挤压、操作列占用多余空间，无法和Process表的列间距匹配。

修改说明 #

• 为表格添加table-fixed类，启用固定表格布局，列宽会严格按照指定规则渲染，不会被内容撑开
• 通过colgroup标签直接定义三列宽度规则：业务列自适应占满剩余空间，两个操作列设置固定宽度，添加text-nowrap类防止操作链接换行
• 保持原有表头结构不变，和Process表的表头展示逻辑完全一致

修正后完整代码 #

<div class="container">
<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="row">
            <div class="col-xs-4 text-left">Departments</div>
            <div class="col-xs-8 text-right">
                <a class="link-dark text-light" href="{% url 'add_department' %}">Add New </a>
            </div>
        </div>
    </div>
    <table class="table table-fixed">
        <thead>
        <tr>
            <th scope="col">Department Name</th>
            <th scope="col" colspan="2">Action</th>
        </tr>
        </thead>
        <colgroup>
            <col style="width: auto;">
            <col style="width: 80px;">
            <col style="width: 80px;">
        </colgroup>
        <tbody>
        {% for department in all_departments %}
        <tr>
            <td>{{department.department_name}}</td>
            <td class="text-nowrap">
                <a class="link-primary" href="{% url 'update_department' department.id %}">Edit</a>
            </td>
            <td class="text-nowrap">
                <a class="link-danger" href="{% url 'delete_department' department.id %}">Delete</a>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

微调说明 #

如果渲染后操作列宽度和Process表仍有细微差异，可以直接修改<colgroup>内两个操作列的width像素值，调整到视觉完全对齐即可。

内容的提问来源于stack exchange，提问作者chlorinelemon