Расстояние между столбцами таблицы Bootstrap 5

Нужна помощь в форматировании интервала между столбцами таблицы Bootstrap. Показанные данные заполняются динамически. Добавить новую в заголовке является кликабельной ссылкой. Таблица Departments имеет только одно поле, но в каждой строке должны быть кнопки с кликабельными ссылками Edit и Delete, как показано на рисунке. Моя задача - добиться того, чтобы расстояние между всеми тремя столбцами (Название отдела, Редактировать и Удалить) выглядело более или менее похоже на таблицу Process.

Пожалуйста, помогите исправить приведенный ниже код, чтобы таблица Departments отображалась как таблица 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">
        <thead>
        <tr>
            <th scope="col">Department Name</th>
            <th scope="col" colspan="2">Action</th>
        </tr>
        </thead>
        <tbody>
        {% for department in all_departments %}
        <tr>
            <td>{{department.department_name}}</td>
            <td>
                <a class="link-primary" href="{% url 'update_department' department.id %}">Edit</a>
            </td>
            <td class="w-10">
                <a class="link-danger" href="{% url 'delete_department' department.id %}">Delete</a>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<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">
        <thead>
        <tr>
            <th scope="col">Department Name</th>
            <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody>
        {% for department in all_departments %}
        <tr>
            <td>{{department.department_name}}</td>
            <td>
                <div style="display: inline-flex;">
                    <a class="link-primary" href="{% url 'update_department' department.id %}">Edit</a>
                    <a class="link-danger" style="margin-left: 8px;" href="{% url 'delete_department' department.id %}">Delete</a>
                </div>
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>