現在、xserver 上で laravel でカード型データベースを動かしていますが、css や js はアバウトに使用していました。
以前から、きちんとしたものを使いたいと思っていましたが、ハードルが高くてそのままにしていました。
今回、laravel + tailwind でローカルで作ったものを xserver にアップしてみました。
table の幅をどうするか
これまでも、コンピュータではきちんと閲覧できるデータがスマホではテーブルの横幅が画面からハミ出てしまう現象は起こっていました。
スマホをあまり使う機会がないので放置していましたが、今回本気でなんとかしようと chatGPT に相談していろいろやってみたのですが、完全には実現できませんでした。
そもそも、かなり大きな横幅のテーブルをスマホで閲覧すること自体かなり無理があるという結論に達しました。
これは、きちんと表示されるテーブルの一部ですが、ハミ出してしまうものは右側が切れてしまいます。
現時点ではここまでしかできませでした。
コード
記録しておかないと忘れてしまうので、一応記録しておきます。
<div class="m-3" style="overflow-x: auto;">
<table class="table-auto">
<tr>
<th class="bg-cyan-800 text-white border border-white">id</th>
<th class="bg-cyan-800 text-white border border-white">日付</th>
<th class="bg-cyan-800 text-white border border-white">カテゴリ</th>
<th class="bg-cyan-800 text-white border border-white">コメント</th>
<th class="bg-cyan-800 text-white border border-white" width="60">画像</th>
<th class="bg-cyan-800 text-white border border-white">訂正</th>
<th class="bg-cyan-800 text-white border border-white">削除</th>
</tr>
@foreach ($datas as $ev)
<tr>
<td class="border border-slate-300 p-2">{{ $ev['id'] }}</td>
<td class="border border-slate-300 p-2">{{ $ev['hizuke'] }}</td>
<td class="border border-slate-300 p-2">{{ $ev['category'] }}</td>
<td class="border border-slate-300 p-2">{!! nl2br(htmlspecialchars($ev['comment'])) !!}</td>
@if ($ev['img_path'])
<td class="border border-slate-300 p-2"><a href="{{ 'storage/'.$ev['img_path'] }}" class="gallery"><img src="{{ asset('storage/'.$ev['img_path']) }}" width="30"></a></td>
@else
<td class="border border-slate-300 p-2"></td>
@endif
<td class="border border-slate-300 p-2"><a href="{{ '/update/'.$ev['id'] }}"><input type="button" value="訂正"></a></td>
<td class="border border-slate-300 p-2"><a href="{{ '/delete/'.$ev['id'] }}"><input type="button" value="削除"></a></td>
</tr>
@endforeach
</table>
</div>
talbe の幅を、「w-1/6」やら「w-48」やら「width:100」やらありとあらゆることを試してみたのですが、思うように実現はできませんでした。
閲覧はできるのですが、スマホではかなり横にスクロールしなければなりません。
一つの画面ですべてを表示するのはスマホでは無理なのですが、もう少しスクロールする幅を少なくできるはずですが。
xserver へのデプロイ（アップロード）はとても簡単
xserver へのデプロイは、xserver の laravel をローカルで動かせているのであればとても簡単です。
scp -r -i ~/.ssh/moheno.key -P 10022 ~/sample1 heno@sv11452.xserver.jp:~/moheno.site/
あとは、ssh ログインして sample1 の .env でデータベース情報を変更するだけです。
データベース情報の変更以外にすることは何もありません。
table の横幅は td でおこなう？
table の横幅を th でコントロールしようとしましたが全然できず、ある時 td だったらどうなるの？と思って td の幅を規定したら反映されました。
しかし、コンピュータとスマホでは切り替える必要があり、それは tailwind では無理のようで、やはり css でコントロールするようです。
<style>
/* コンピュータ用のスタイル */
@media (min-width: 768px) {
.comment-cell {
max-width: 450px;
width: 100%;
height: auto;
}
}
/* スマートフォン用のスタイル */
@media (max-width: 767px) {
.comment-cell {
max-width: 300px;
width: 100%;
height: auto;
}
}
</style>
....................
<td class="border border-slate-300 p-2 comment-cell">{!! nl2br(htmlspecialchars($ev['comment'])) !!}</td>
