Reponsive table

This commit is contained in:
2021-09-05 17:24:29 +02:00
parent 84be59bc91
commit b2675d7c30
2 changed files with 58 additions and 53 deletions

View File

@@ -74,7 +74,7 @@
</div> </div>
</nav> </nav>
<main class="py-4 container mx-auto"> <main class="py-4 container mx-auto px-4 md:px-0">
@yield('content') @yield('content')
</main> </main>
</div> </div>

View File

@@ -31,23 +31,28 @@
Add Beer Add Beer
</button> </button>
</form> </form>
<table class="mx-auto border-2 border-black text-center my-10"> <div class="overflow-x-auto">
<table style="border-spacing:0" class="mx-auto border-collapse w-full border-2 border-black text-center my-10">
<tr class="border-black border-2 text-xl"> <tr class="border-black border-2 text-xl">
<th class="border-black border-r-2 px-4"> <th class="border-black border-r-2 px-4 w-1/4">
@sortablelink('beer') @sortablelink('beer')
<img class="w-4 float-right mt-2" src="https://www.shareicon.net/data/2015/11/07/668285_arrows_512x512.png"/> <img class="w-4 float-right mt-2"
src="https://www.shareicon.net/data/2015/11/07/668285_arrows_512x512.png" />
</th> </th>
<th class="border-black border-r-2 px-4"> <th class="border-black border-r-2 px-4">
@sortablelink('rating') @sortablelink('rating')
<img class="w-4 float-right mt-2" src="https://www.shareicon.net/data/2015/11/07/668285_arrows_512x512.png"/> <img class="w-4 float-right mt-2"
src="https://www.shareicon.net/data/2015/11/07/668285_arrows_512x512.png" />
</th> </th>
<th class="border-black border-r-2 px-4"> <th class="border-black border-r-2 px-4">
@sortablelink('country') @sortablelink('country')
<img class="w-4 float-right mt-2" src="https://www.shareicon.net/data/2015/11/07/668285_arrows_512x512.png"/> <img class="w-4 float-right mt-2"
src="https://www.shareicon.net/data/2015/11/07/668285_arrows_512x512.png" />
</th> </th>
<th class="border-black border-r-2 px-4"> <th class="border-black border-r-2 px-4">
@sortablelink('type') @sortablelink('type')
<img class="w-4 float-right mt-2" src="https://www.shareicon.net/data/2015/11/07/668285_arrows_512x512.png"/> <img class="w-4 float-right mt-2"
src="https://www.shareicon.net/data/2015/11/07/668285_arrows_512x512.png" />
</th> </th>
</tr> </tr>
@foreach ($listBeers as $beer) @foreach ($listBeers as $beer)
@@ -83,7 +88,7 @@
</tr> </tr>
@endforeach @endforeach
</table> </table>
</div>
@if (session()->has('success')) @if (session()->has('success'))
<p class="text-green-400 my-4">{{ Session::get('success') }}</p> <p class="text-green-400 my-4">{{ Session::get('success') }}</p>