use table-responsive not card overflow

Author: kdion4891

resources/views/table.blade.php

@@ -15,67 +15,69 @@
  @endif
  </div>
 
- <div class="card overflow-auto mb-3">
+ <div class="card mb-3">
  @if($models->isEmpty())
  <div class="card-body">
  {{ __('No results to display.') }}
  </div>
  @else
  <div class="card-body p-0">
- <table class="table {{ $table_class }} mb-0">
- <thead class="{{ $thead_class }}">
- <tr>
- @if($checkbox && $checkbox_side == 'left')
- @include('laravel-livewire-tables::checkbox-all')
- @endif
-
- @foreach($columns as $column)
- <th class="align-middle text-nowrap border-top-0 {{ $this->thClass($column->attribute) }}">
- @if($column->sortable)
- <span style="cursor: pointer;" wire:click="sort('{{ $column->attribute }}')">
- {{ $column->heading }}
-
- @if($sort_attribute == $column->attribute)
- <i class="fa fa-sort-amount-{{ $sort_direction == 'asc' ? 'up-alt' : 'down' }}"></i>
- @else
- <i class="fa fa-sort-amount-up-alt" style="opacity: .35;"></i>
- @endif
- </span>
- @else
- {{ $column->heading }}
- @endif
- </th>
- @endforeach
-
- @if($checkbox && $checkbox_side == 'right')
- @include('laravel-livewire-tables::checkbox-all')
- @endif
- </tr>
- </thead>
- <tbody>
- @foreach($models as $model)
- <tr class="{{ $this->trClass($model) }}">
+ <div class="table-responsive">
+ <table class="table {{ $table_class }} mb-0">
+ <thead class="{{ $thead_class }}">
+ <tr>
  @if($checkbox && $checkbox_side == 'left')
- @include('laravel-livewire-tables::checkbox-row')
+ @include('laravel-livewire-tables::checkbox-all')
  @endif
 
  @foreach($columns as $column)
- <td class="align-middle {{ $this->tdClass($column->attribute, $value = Arr::get($model->toArray(), $column->attribute)) }}">
- @if($column->view)
- @include($column->view)
+ <th class="align-middle text-nowrap border-top-0 {{ $this->thClass($column->attribute) }}">
+ @if($column->sortable)
+ <span style="cursor: pointer;" wire:click="sort('{{ $column->attribute }}')">
+ {{ $column->heading }}
+
+ @if($sort_attribute == $column->attribute)
+ <i class="fa fa-sort-amount-{{ $sort_direction == 'asc' ? 'up-alt' : 'down' }}"></i>
+ @else
+ <i class="fa fa-sort-amount-up-alt" style="opacity: .35;"></i>
+ @endif
+ </span>
  @else
- {{ $value }}
+ {{ $column->heading }}
  @endif
- </td>
+ </th>
  @endforeach
 
  @if($checkbox && $checkbox_side == 'right')
- @include('laravel-livewire-tables::checkbox-row')
+ @include('laravel-livewire-tables::checkbox-all')
  @endif
  </tr>
- @endforeach
- </tbody>
- </table>
+ </thead>
+ <tbody>
+ @foreach($models as $model)
+ <tr class="{{ $this->trClass($model) }}">
+ @if($checkbox && $checkbox_side == 'left')
+ @include('laravel-livewire-tables::checkbox-row')
+ @endif
+
+ @foreach($columns as $column)
+ <td class="align-middle {{ $this->tdClass($column->attribute, $value = Arr::get($model->toArray(), $column->attribute)) }}">
+ @if($column->view)
+ @include($column->view)
+ @else
+ {{ $value }}
+ @endif
+ </td>
+ @endforeach
+
+ @if($checkbox && $checkbox_side == 'right')
+ @include('laravel-livewire-tables::checkbox-row')
+ @endif
+ </tr>
+ @endforeach
+ </tbody>
+ </table>
+ </div>
  </div>
  @endif
  </div>