title: Removing whitespace on hidden table rows
body: <p>I have a system where clients have enrollments for different things and details are shown in a table. I have set clients who have multiple enrollments to have a table row that has a clickable dropdown to show other enrollments. However, when the row dropdown is not initially clicked, there is whitespace rows in the table for the hidden rows. How can I remove this whitespace?</p>
  
  <p><a href="https://i.stack.imgur.com/WgiTF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WgiTF.png" alt="Searchable dashboard table with clients with enrollments"></a></p>
  
  <p>Here is my code.</p>
  
  <p>Javascript:</p>
  
  <pre><code>$('.enrollment-toggle').on('click', function () {
    console.log($(this).data('client-id'));
    if ($(this).children('i').hasClass('fa-caret-right')) {
      $(this).children("i").removeClass("fa-caret-right").addClass("fa-caret-down");
    } else {
      $(this).children("i").removeClass("fa-caret-down").addClass("fa-caret-right");
    }
  });
  
  $('.table tr').each(function() {
      if ($(this).find('td:empty').length) $(this).remove();
  });​
  
  $('.table tr').each(function() {
      if ($(this).find('td:empty').length) $(this).css("display","none")
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <p>index.html.erb</p>
  
  <pre><code>&lt;section class="row"&gt;
    &lt;section class="col-lg-12"&gt;
      &lt;h1 class="page-header"&gt;Dashboard&lt;/h1&gt;
    &lt;/section&gt;
  &lt;/section&gt;
  &lt;input type="text" id="searchable-dashboard-table" class="form-control" placeholder="Search dashboard table.. (case sensitive)" style="margin-bottom:10px;"&gt;
  &lt;section class="row"&gt;
    &lt;section class="col-lg-12"&gt;
      &lt;section class="panel panel-default"&gt;
        &lt;section class="panel-heading"&gt;
          &lt;h3 class="panel-title"&gt;Past Due Enrollments&lt;/h3&gt;
          &lt;div class="pull-right"&gt;
            &lt;div class="btn-group actions"&gt;
              &lt;%= link_to '&lt;i class="fa fa-file-excel-o"&gt;&lt;/i&gt; Export All Tabs'.html_safe, dashboards_path(format: 'xlsx'), class: 'btn btn-primary' %&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="panel-body"&gt;
          &lt;section role="tabpanel"&gt;
            &lt;ul class="nav nav-tabs" role="tablist"&gt;
              &lt;li role="presentation" class="active"&gt;&lt;a href="#current" aria-controls="current" role="tab" data-toggle="tab"&gt;Current&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#30days" aria-controls="30days" role="tab" data-toggle="tab"&gt;30 Days&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#60days" aria-controls="60days" role="tab" data-toggle="tab"&gt;60 Days&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#90days" aria-controls="90days" role="tab" data-toggle="tab"&gt;90 Days&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#120days" aria-controls="120days" role="tab" data-toggle="tab"&gt;120+ Days&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a href="#no-payments" aria-controls="no-payments" role="tab" data-toggle="tab"&gt;No Payments&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;!-- Tab panes --&gt;
            &lt;section class="tab-content"&gt;
              &lt;section role="tabpanel" class="tab-pane active" id="current"&gt;
                &lt;section class="table-responsive"&gt;
                  &lt;table class="table"&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;&lt;/th&gt;
                        &lt;th&gt;Enrollment&lt;/th&gt;
                        &lt;th&gt;First Name&lt;/th&gt;
                        &lt;th&gt;Last Name&lt;/th&gt;
                        &lt;th&gt;Program Status&lt;/th&gt;
                        &lt;th&gt;Last Payment Date&lt;/th&gt;
                        &lt;th&gt;Last Payment Amount&lt;/th&gt;
                        &lt;th&gt;Total Amount Charged&lt;/th&gt;
                        &lt;th&gt;Total Amount Paid&lt;/th&gt;
                        &lt;th&gt;Total Amount Due&lt;/th&gt;
                        &lt;th&gt;Amount Due Per Agreement&lt;/th&gt;
                        &lt;th class="actions"&gt;Actions&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      &lt;%= render partial: 'enrollment', collection: @current_enrollments %&gt;
                    &lt;/tbody&gt;
                    &lt;tfoot&gt;
                      &lt;tr&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @current_enrollments_totals[:last_payment_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @current_enrollments_totals[:total_amount_charged_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @current_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @current_enrollments_totals[:total_amount_due_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @current_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td class='actions'&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
  
                    &lt;/tfoot&gt;
                  &lt;/table&gt;
                &lt;/section&gt;
              &lt;/section&gt;
              &lt;section role="tabpanel" class="tab-pane" id="30days"&gt;
                &lt;section class="table-responsive"&gt;
                  &lt;table class="table"&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;&lt;/th&gt;
                        &lt;th&gt;Enrollment&lt;/th&gt;
                        &lt;th&gt;First Name&lt;/th&gt;
                        &lt;th&gt;Last Name&lt;/th&gt;
                        &lt;th&gt;Program Status&lt;/th&gt;
                        &lt;th&gt;Last Payment Date&lt;/th&gt;
                        &lt;th&gt;Last Payment Amount&lt;/th&gt;
                        &lt;th&gt;Total Amount Charged&lt;/th&gt;
                        &lt;th&gt;Total Amount Paid&lt;/th&gt;
                        &lt;th&gt;Total Amount Due&lt;/th&gt;
                        &lt;th&gt;Amount Due Per Agreement&lt;/th&gt;
                        &lt;th class="actions"&gt;Actions&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      &lt;%= render partial: 'enrollment', collection: @thirty_day_enrollments %&gt;
                    &lt;/tbody&gt;
                    &lt;tfoot&gt;
                      &lt;tr&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @thirty_day_enrollments_totals[:last_payment_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @thirty_day_enrollments_totals[:total_amount_charged_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @thirty_day_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @thirty_day_enrollments_totals[:total_amount_due_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @thirty_day_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td class='actions'&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
  
                    &lt;/tfoot&gt;
                  &lt;/table&gt;
                &lt;/section&gt;
              &lt;/section&gt;
              &lt;section role="tabpanel" class="tab-pane" id="60days"&gt;
                &lt;section class="table-responsive"&gt;
                  &lt;table class="table"&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;&lt;/th&gt;
                        &lt;th&gt;Enrollment&lt;/th&gt;
                        &lt;th&gt;First Name&lt;/th&gt;
                        &lt;th&gt;Last Name&lt;/th&gt;
                        &lt;th&gt;Program Status&lt;/th&gt;
                        &lt;th&gt;Last Payment Date&lt;/th&gt;
                        &lt;th&gt;Last Payment Amount&lt;/th&gt;
                        &lt;th&gt;Total Amount Charged&lt;/th&gt;
                        &lt;th&gt;Total Amount Paid&lt;/th&gt;
                        &lt;th&gt;Total Amount Due&lt;/th&gt;
                        &lt;th&gt;Amount Due Per Agreement&lt;/th&gt;
                        &lt;th class="actions"&gt;Actions&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      &lt;%= render partial: 'enrollment', collection: @sixty_day_enrollments %&gt;
                    &lt;/tbody&gt;
                    &lt;tfoot&gt;
                      &lt;tr&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @sixty_day_enrollments_totals[:last_payment_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @sixty_day_enrollments_totals[:total_amount_charged_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @sixty_day_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @sixty_day_enrollments_totals[:total_amount_due_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @sixty_day_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td class='actions'&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
  
                    &lt;/tfoot&gt;
                  &lt;/table&gt;
                &lt;/section&gt;
              &lt;/section&gt;
              &lt;section role="tabpanel" class="tab-pane" id="90days"&gt;
                &lt;section class="table-responsive"&gt;
                  &lt;table class="table"&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;&lt;/th&gt;
                        &lt;th&gt;Enrollment&lt;/th&gt;
                        &lt;th&gt;First Name&lt;/th&gt;
                        &lt;th&gt;Last Name&lt;/th&gt;
                        &lt;th&gt;Program Status&lt;/th&gt;
                        &lt;th&gt;Last Payment Date&lt;/th&gt;
                        &lt;th&gt;Last Payment Amount&lt;/th&gt;
                        &lt;th&gt;Total Amount Charged&lt;/th&gt;
                        &lt;th&gt;Total Amount Paid&lt;/th&gt;
                        &lt;th&gt;Total Amount Due&lt;/th&gt;
                        &lt;th&gt;Amount Due Per Agreement&lt;/th&gt;
                        &lt;th class="actions"&gt;Actions&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      &lt;%= render partial: 'enrollment', collection: @ninty_day_enrollments %&gt;
                    &lt;/tbody&gt;
                    &lt;tfoot&gt;
                      &lt;tr&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @ninty_day_enrollments_totals[:last_payment_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @ninty_day_enrollments_totals[:total_amount_charged_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @ninty_day_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @ninty_day_enrollments_totals[:total_amount_due_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @ninty_day_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td class='actions'&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
  
                    &lt;/tfoot&gt;
                  &lt;/table&gt;
                &lt;/section&gt;
              &lt;/section&gt;
              &lt;section role="tabpanel" class="tab-pane" id="120days"&gt;
                &lt;section class="table-responsive"&gt;
                  &lt;/section&gt;
                  &lt;table class="table"&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;&lt;/th&gt;
                        &lt;th&gt;Enrollment&lt;/th&gt;
                        &lt;th&gt;First Name&lt;/th&gt;
                        &lt;th&gt;Last Name&lt;/th&gt;
                        &lt;th&gt;Program Status&lt;/th&gt;
                        &lt;th&gt;Last Payment Date&lt;/th&gt;
                        &lt;th&gt;Last Payment Amount&lt;/th&gt;
                        &lt;th&gt;Total Amount Charged&lt;/th&gt;
                        &lt;th&gt;Total Amount Paid&lt;/th&gt;
                        &lt;th&gt;Total Amount Due&lt;/th&gt;
                        &lt;th&gt;Amount Due Per Agreement&lt;/th&gt;
                        &lt;th class="actions"&gt;Actions&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      &lt;%= render partial: 'enrollment', collection: @one_twenty_day_enrollments %&gt;
                    &lt;/tbody&gt;
                    &lt;tfoot&gt;
                      &lt;tr&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @one_twenty_day_enrollments_totals[:last_payment_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @one_twenty_day_enrollments_totals[:total_amount_charged_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @one_twenty_day_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @one_twenty_day_enrollments_totals[:total_amount_due_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @one_twenty_day_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td class='actions'&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
  
                    &lt;/tfoot&gt;
                  &lt;/table&gt;
                &lt;/section&gt;
              &lt;/section&gt;
              &lt;section role="tabpanel" class="tab-pane" id="no-payments"&gt;
                &lt;section class="table-responsive"&gt;
                  &lt;table class="table"&gt;
                    &lt;thead&gt;
                      &lt;tr&gt;
                        &lt;th&gt;&lt;/th&gt;
                        &lt;th&gt;Enrollment&lt;/th&gt;
                        &lt;th&gt;First Name&lt;/th&gt;
                        &lt;th&gt;Last Name&lt;/th&gt;
                        &lt;th&gt;Program Status&lt;/th&gt;
                        &lt;th&gt;Last Payment Date&lt;/th&gt;
                        &lt;th&gt;Last Payment Amount&lt;/th&gt;
                        &lt;th&gt;Total Amount Charged&lt;/th&gt;
                        &lt;th&gt;Total Amount Paid&lt;/th&gt;
                        &lt;th&gt;Total Amount Due&lt;/th&gt;
                        &lt;th&gt;Amount Due Per Agreement&lt;/th&gt;
                        &lt;th class="actions"&gt;Actions&lt;/th&gt;
                      &lt;/tr&gt;
                    &lt;/thead&gt;
                    &lt;tbody&gt;
                      &lt;%= render partial: 'enrollment', collection: @no_payment_enrollments %&gt;
                    &lt;/tbody&gt;
                    &lt;tfoot&gt;
                      &lt;tr&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @no_payment_enrollments_totals[:last_payment_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @no_payment_enrollments_totals[:total_amount_charged_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @no_payment_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @no_payment_enrollments_totals[:total_amount_due_total] %&gt;&lt;/td&gt;
                        &lt;td&gt;&lt;%= number_to_currency @no_payment_enrollments_totals[:total_amount_paid_total] %&gt;&lt;/td&gt;
                        &lt;td class='actions'&gt;
                        &lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/tfoot&gt;
                  &lt;/table&gt;
                &lt;/section&gt;
              &lt;/section&gt;
          &lt;/section&gt;
        &lt;/section&gt;
      &lt;/section&gt;
    &lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>_enrollment.html.erb</p>
  
  <pre><code>&lt;% client_enrollment_ids = enrollment.client.client_enrollments.pluck(:id) rescue [] %&gt;
  &lt;% if @enrollments_ids.include?(enrollment.id) %&gt;
    &lt;tr class="client-enrollment-&lt;%= enrollment.id %&gt;"&gt;
      &lt;td&gt;
        &lt;% if client_enrollment_ids.length &gt; 1 %&gt;
          &lt;a class="enrollment-toggle" data-toggle="collapse" data-target=".collapseEnrollment-&lt;%= enrollment.client.id %&gt;" aria-expanded="false" aria-controls="collapseEnrollment-&lt;%= enrollment.client.id %&gt;" data-client-id="&lt;%= enrollment.client.id %&gt;"&gt;
            &lt;i class="fa fa-caret-right" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;% end %&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;%= enrollment.name %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= enrollment.try(:client).try(:first_name) %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= enrollment.try(:client).try(:last_name) %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= enrollment.try(:program_status).try(:status) %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= ldate enrollment.last_payment_date %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= number_to_currency enrollment.last_payment_amount %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= number_to_currency enrollment.total_amount_charged %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= number_to_currency enrollment.total_amount_paid %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= number_to_currency enrollment.total_amount_due %&gt;&lt;/td&gt;
      &lt;td&gt;&lt;%= number_to_currency enrollment.payment_agreement_amount %&gt;&lt;/td&gt;
      &lt;td class='actions'&gt;
        &lt;div class="btn-group"&gt;
          &lt;%= link_to 'Action', '#', title: 'View Record', data: { toggle: 'dropdown' }, class: 'btn btn-primary' %&gt;
          &lt;%= link_to '&lt;span class="caret"&gt;&lt;/span&gt;'.html_safe, '#', data: { toggle: 'dropdown' }, title: 'More Actions', class: 'btn btn-primary dropdown-toggle' %&gt;
          &lt;ul class="dropdown-menu"&gt;
            &lt;% if enrollment.client %&gt;
              &lt;li&gt;&lt;%= link_to '&lt;i class="fa fa-eye"&gt;&lt;/i&gt; Show'.html_safe, service_provider_client_client_enrollment_path(enrollment.service_provider, enrollment.client, enrollment), title: 'View Record' %&gt;&lt;/li&gt;
            &lt;% end %&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;% enrollment.client.client_enrollments.where("client_enrollments.id != ?", enrollment.id).each do |e| %&gt;
      &lt;tr class="secondary-enrollments collapse card card-block client-enrollment-&lt;%= e.id %&gt; collapseEnrollment-&lt;%= e.client.id %&gt;"&gt;
        &lt;td&gt;&lt;i class="fa fa-angle-right secondary-enrollment-indicator"&gt;&lt;/i&gt;&lt;/td&gt;
        &lt;td&gt;&lt;%= e.name %&gt;&lt;/td&gt;
        &lt;td&gt;&lt;%= e.try(:client).try(:first_name) %&gt;&lt;/td&gt;
        &lt;td&gt;&lt;%= e.try(:client).try(:last_name) %&gt;&lt;/td&gt;
        &lt;td&gt;&lt;%= e.try(:program_status).try(:status) %&gt;&lt;/td&gt;
        &lt;td&gt;&lt;%= ldate e.last_payment_date %&gt;&lt;/td&gt;
        &lt;td&gt;&lt;%= number_to_currency e.last_payment_amount %&gt;&lt;/td&gt;
        &lt;td&gt;&lt;%= number_to_currency e.total_amount_charged %&gt;&lt;/td&gt;
        &lt;td&gt;&lt;%= number_to_currency e.total_amount_paid %&gt;&lt;/td&gt;
        &lt;td&gt;&lt;%= number_to_currency e.total_amount_due %&gt;&lt;/td&gt;
        &lt;td&gt;&lt;%= number_to_currency e.payment_agreement_amount %&gt;&lt;/td&gt;
        &lt;td class='actions'&gt;
          &lt;div class="btn-group"&gt;
            &lt;%= link_to 'Action', '#', title: 'View Record', data: { toggle: 'dropdown' }, class: 'btn btn-primary' %&gt;
            &lt;%= link_to '&lt;span class="caret"&gt;&lt;/span&gt;'.html_safe, '#', data: { toggle: 'dropdown' }, title: 'More Actions', class: 'btn btn-primary dropdown-toggle' %&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;% if e.client %&gt;
                &lt;li&gt;&lt;%= link_to '&lt;i class="fa fa-eye"&gt;&lt;/i&gt; Show'.html_safe, service_provider_client_client_enrollment_path(e.service_provider, e.client, e), title: 'View Record' %&gt;&lt;/li&gt;
              &lt;% end %&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;% end %&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>Here is the JS code for the search within those tables.</p>
  
  <p>dashboard.js</p>
  
  <pre><code>var searchTable = function(event) {
    var searchText = event.target.value;
    console.log(searchText);
    var $tableBody = $("table tbody tr");
  
    // Show only matching TR, hide rest of them
    $tableBody.each(function(index, row) {
      var hasMatch;
      var $row = $(row).text();
  
      hasMatch = ($row.includes(searchText));
      hasMatch ? $(this).show() : $(this).hide()
    });
  }
  
  $("#searchable-dashboard-table").keyup(searchTable);
  </code></pre>
  
  <p>I have tried working within Chrome Dev Tools and changing some CSS things to see if it would fix this issue, but no luck so far.</p>