Responsive Details Not Showing On jquery-datatables-rails

I've been trying to make this work and I can't seem to find a solution:

I have a table and I have a basic initialization of the Datatables everything seems to work fine but once the responsive gets activated the details button doesn't work if I click on it it goes red with the - sign but the details doesn't appear.

This is my table:

<table id="tabla" class="display dt-responsive no-wrap" width="100%">
  <thead>
    <tr>
      <th>Profesor</th>
      <th>Materia</th>
      <th>Seccion</th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <% @profesors.each do |profesor| %>
      <tr>
        <td><%= profesor.profesor %></td>
        <td><%= profesor.materia %></td>
        <td><%= profesor.seccion %></td>
        <td><%= link_to 'Show', profesor %></td>
        <td><%= link_to 'Edit', edit_profesor_path(profesor) %></td>
        <td><%= link_to 'Destroy', profesor, method: :delete, data: { confirm: 'Are you sure?' } %></td>
        <td><%= link_to 'Alumnos', alumnos_path("prof" => profesor) %></td>
      </tr>
    <% end %>
  </tbody>
</table>

This is my JS

$('#tabla').DataTable({
    responsive: true
});