use table-responsive not card overflow

kdion4891 · Mar 4, 2020 · 47baad2 · 47baad2
1 parent 00d49f3
commit 47baad2
Showing 1 changed file with 46 additions and 44 deletions.
diff --git a/resources/views/table.blade.php b/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>