Unable of change td size of a bootstrap table

Question

I'm using a div with a class called table-responsive from bootstrap 4, and inside of it I have a table. My goal is change the size of some table cells in mobile devices.

I'm using td:nth-child(4) but it only changes the background color of the 4th column and the size never changes. Any ideas I will appreciate to fix this problem. Thanks so much.

/* For Mobile Portrait View */

@media screen and (max-device-width: 480px) and (orientation: portrait) {
  td:nth-child(4) {
    background-color: red;
    width: 80%;
  }
}


/* For Mobile Landscape View */

@media screen and (max-device-width: 640px) and (orientation: landscape) {
  td:nth-child(4) {
    background-color: red;
    width: 80%;
  }
}


/* For Mobile Phones Portrait or Landscape View */

@media screen and (max-device-width: 640px) {
  td:nth-child(4) {
    background-color: red;
    width: 80%;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="table-responsive">
  <table class="table  table-bordered table-hover">
    <thead class="bg-dark text-white">

      <tr>
        <th>#</th>
        <th>Tipo de Usuario</th>
        <th>Correo Usuario</th>
        <th>Empleado </th>
        <th>Tipo de Empleado</th>
        <th>Fecha de Registro</th>
        <th>Acción</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th data-title="#">{{ $users->firstItem() + $index }}</th>

        <td data-title="Tipo Usuario">{{ $user->name }}</td>
        <td data-title="Correo Usuario">{{ $user->email }}</td>
        <td data-title="Empleado">{{ optional($user->employee)->name }} {{ optional($user->employee)->last_name }}</td>
        <td data-title="Tipo Empleado">{{ $employee->getTypeEmployee(optional($user->employee)->employee_type_id) }}</td>

        <td data-title="Fecha Registro">{{ $user->created_at }}</td>

        <td data-title="Acción">
          <a title="Ver registro" href="{{ route('admin.users.show', $user->id)}}" class="btn btn-info btn-sm">
            <i class="fas fa-eye"></i> </a>

          <a title="Editar registro" href="{{ route('admin.users.edit', $user->id)}}" class="btn btn-success btn-sm">
            <i class="fa fa-edit"></i> </a>

          <a title="Eliminar registro" href="{{ route('admin.users.confirm', $user->id) }}" class="btn btn-danger btn-sm">
            <i class="fa fa-trash-alt"></i> </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>