Table columns sizing is not working with col-*

[julianonunes]

I have a table like this:

<table class="table table-bordered table-striped">
            <thead>
              <tr>
                <th class="col-5">Name</th>
                <th class="col-3">Login</th>
                <th class="col-3">Role</th>
                <th class="col-1"></th>
              </tr>
            </thead>
            <tbody>
             <tr>
                <td>Juliano</td>
                <td>juliano</td>
                <td>Supervisor</td>
                <td>
                  <a class="float-right holder-icon-link" href="null"><i class="fa fa-trash fa-lg"></i></a>
                  <a class="float-right holder-icon-link" ng-reflect-router-link="/users/edit,4" href="#/users/edit/4"><i class="fa fa-pencil fa-lg"></i></a></td>
              </tr>

            </tbody>
          </table>

However the columns are not respecting the sizes I've set on each <th></th>. The first column is taking almost all of the available space and the others are using just the space necessary for its content. Why?

[jedsmithobd]

This is very much a Bootstrap 4 question. It is related to Bootstrap 4 using flexbox for column widths now. To make it work I have to add d-inline-block in addition to the col-1 to each <th> and also to each <td>. Hope that helps.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions