diff options
| author | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-04-10 08:33:04 +0200 |
|---|---|---|
| committer | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-04-10 08:33:04 +0200 |
| commit | f6d3c05a89332d24da196bccab466af224cd368e (patch) | |
| tree | 0d5db9d7b05ef95c96d7fad95285d293575350fb | |
| parent | 941dd72ce84576c1778e9ee46d52a765ddec35bc (diff) | |
Fix tables on mobile
Display block was breaking small tables.
Added a hook to keep a block for overflow
| -rw-r--r-- | assets/css/main.css | 12 | ||||
| -rw-r--r-- | layouts/_default/_markup/render-table.html | 22 |
2 files changed, 30 insertions, 4 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index cbd7d77..d34ea94 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -177,15 +177,19 @@ header h1 { } /* Tables */ +.table-wrapper { + display: block; + overflow-x: auto; + margin-bottom: 1.25rem; +} + table { width: 100%; border: 1px solid var(--color-border); border-radius: 0.375rem; border-collapse: separate; border-spacing: 0; - margin-bottom: 1.25rem; - display: block; - overflow-x: auto; + display: table; } thead th { @@ -209,7 +213,7 @@ tbody td:last-child { border-right: 0; } tbody tr:last-child td { border-bottom: 0; } @media (min-width: 768px) { - table { display: table; overflow-x: visible; } + table { width: auto; min-width: 500px; } thead th, tbody td { white-space: normal; } } diff --git a/layouts/_default/_markup/render-table.html b/layouts/_default/_markup/render-table.html new file mode 100644 index 0000000..4f057cc --- /dev/null +++ b/layouts/_default/_markup/render-table.html @@ -0,0 +1,22 @@ +<div class="table-wrapper"> + <table> + <thead> + {{ range .THead }} + <tr> + {{ range . }} + <th>{{ .Text }}</th> + {{ end }} + </tr> + {{ end }} + </thead> + <tbody> + {{ range .TBody }} + <tr> + {{ range . }} + <td>{{ .Text }}</td> + {{ end }} + </tr> + {{ end }} + </tbody> + </table> +</div> |