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>
</nav>
<main class="py-4 container mx-auto">
<main class="py-4 container mx-auto px-4 md:px-0">
@yield('content')
</main>
</div>

View File

@@ -31,23 +31,28 @@
Add Beer
</button>
</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">
<th class="border-black border-r-2 px-4">
<th class="border-black border-r-2 px-4 w-1/4">
@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 class="border-black border-r-2 px-4">
@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 class="border-black border-r-2 px-4">
@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 class="border-black border-r-2 px-4">
@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>
</tr>
@foreach ($listBeers as $beer)
@@ -83,7 +88,7 @@
</tr>
@endforeach
</table>
</div>
@if (session()->has('success'))
<p class="text-green-400 my-4">{{ Session::get('success') }}</p>