Bootstrap 4 таблицы не подходит для полной ширины с D-Flex

Question

С новой Bootstrap 4 больше нельзя просто применять классы, такие как col-md-2, к тегам или таблицам.

Таким образом, решение, похоже, использует class = "d-flex" в родительском элементе:

<tr class="d-flex">

но когда я делаю это, вся моя таблица больше не помещается в родительский div. И я ничего не могу с этим поделать.

Может кто-нибудь помочь мне получить ключ?

Вот код таблицы:

<div class="card-body">
   <h3 class="col-12 mt-2">Lehrer</h3>
   <table class="table table-light">
       <tbody>
            <tr class="d-flex">
                <td class="col-md-1">Florian</td>
                <td class="col-md-2">Wassermair</td>
                <td class="col-md-4">Schulbuchbeauftragter</td>

                <td class="col-md-1">
                   <a class="btn btn-primary" href="/profile/show/4">
                      <i class="icon icon-eye"></i>
                   </a>
                </td>

                <td class="col-md-1">
                   <a class="btn btn-success" href="/personal/4/edit">
                       <i class="icon icon-edit"></i>
                   </a>
                </td>
           </tr>

           <tr class="d-flex">
                <td class="col-md-1">Bernadette</td>
                <td class="col-md-2">Mayr</td>
                <td class="col-md-4"></td>

                <td class="col-md-1">
                    <a class="btn btn-primary" href="/profile/show/3">
                        <i class="icon icon-eye"></i>
                    </a>
                </td>

                <td class="col-md-1">
                    <a class="btn btn-success" href="/personal/6/edit">
                        <i class="icon icon-edit"></i>
                    </a>
                </td>
           </tr>                                                                                         
      </tbody>
   </table>
</div>

Answer 1

Если вы хотите, чтобы ячейки таблицы заполняли ширину, используйте 12 единиц столбцов ...

<tr class="row mx-0">
    <td class="col-md-2">Bernadette</td>
    <td class="col-md-2">Mayr</td>
    <td class="col-md-6"></td>
    <td class="col-md-1">
        <a class="btn btn-primary" href="/profile/show/3">
            <i class="icon icon-eye"></i>
        </a>
    </td>
    <td class="col-md-1">
        <a class="btn btn-success" href="/personal/6/edit">
            <i class="icon icon-pencil"></i>
        </a>
    </td>
</tr>

Или, используйте ml-auto для перемещения столбцов вправо.

<tr class="row mx-0">
    <td class="col-md-2">Florian</td>
    <td class="col-md-2">Wassermair</td>
    <td class="col-md-4">Schulbuchbeauftragter</td>
    <td class="col-md-1 ml-auto">
        <a class="btn btn-primary" href="/profile/show/4">
            <i class="icon icon-eye"></i>
        </a>
    </td>
    <td class="col-md-1">
        <a class="btn btn-success" href="/personal/4/edit">
            <i class="icon icon-pencil"></i>
        </a>
    </td>
</tr>

https://www.codeply.com/go/xRodoKUKBf