0

Here I'm trying to make my table responsive for smaller screens. Problem is the last column is out of table boundary. In the .js file I did following changes (including reduce the width of column before the last column ) but It didn't fix

initDataTable({
    tableId: "#profilesStatusTable",
    orderVal: 1,
    sortingDirection: "asc",
    targetsVal: [0, 7],
    responsive: true,
    columnDefs: [
      { targets: [10], width: "20px" } // Set width for the 11th column (index 10)
    ]
  });

Then I tried the following approach on .html.erb file

<thead>
  <tr>
    <!-- ... Other th elements ... -->
    <th class="login-count-column">Login Count</th>
    <!-- ... Other th elements ... -->
  </tr>
</thead>
<tbody>
  <% @profiles.each do |profile| %>
    <tr class="<%= cycle('row', 'alt-row') %>">
      <!-- ... Other td elements ... -->
      <td class="login-count-column"><%= profile.user.login_count %></td>
      <!-- ... Other td elements ... -->
    </tr>
  <% end %>
</tbody>

and applied following scss (tried both),

#profilesStatusTable {
  .login-count-column {
    width: 80px;
  }
}

#profilesStatusTable {
  .login-count-column {
    @media (max-width: 767px) {
      width: 60px; /* Adjust the width as needed for smaller screens */
    }
  }
}

but none of them worked. I'm searching for a solution.

crodev
  • 1,323
  • 6
  • 22
  • 39
Devin Y
  • 137
  • 2
  • 13
  • 1
    Tables in general are bit messy on smaller devices, you won't fit it all on the screen for sure. You can maybe add a horizontal scroll on it if you like that approach [check this out](https://stackoverflow.com/questions/5533636/add-a-horizontal-scrollbar-to-an-html-table). Or you can do some different UI approaches like lists or something else. – crodev Aug 07 '23 at 08:59

0 Answers0