ID非公開
ID非公開さん
2022/5/11 23:02
3回答
tableのレスポンシブデザインを教えてください。 画像のような価格表があります。横に種類、縦に内容で、表には価格が入ります。
tableのレスポンシブデザインを教えてください。 画像のような価格表があります。横に種類、縦に内容で、表には価格が入ります。 これをスマホで表示する際分割したいのですが、画像のように種類で1つの表を作る事は出来ないでしょうか? 縦に種類を掲載し、行で分けるというのは見つけたのですが、料金表のためこの方法ではPC側が難しいです。 https://b-risk.jp/blog/2018/07/table-css/#link03 どこかこの方法が掲載されてるサイトは無いでしょうか? (そもそも出来ない?) 無理なら、画像化してPCとスマホで表示を入れ替えるか、PC用の表とスマホ用の表2つを作って表示を入れ替えようかと思います。
ベストアンサー
添付画像のようにスマホ表示の時に横スクロールさせるのではいけないのでしょうか？ 左端の列を表示したままにすることは可能です。 ● CSS .left-sticky th:first-child {position: sticky; left: 0;} .left-sticky th, .left-sticky td {width: 120px; border-collapse: collapse; border: gray solid 1px;} .left-sticky th {background-color: beige;} .left-sticky td {padding-right: 10px; text-align: right;} /* スマホの時のみ */ div.sticky-within {width: 450px; overflow-x: auto;} ● HTML <div class="sticky-within"> <table class="left-sticky"> <tr> <th></th> <th>種類Ａ</th> <th>種類Ｂ</th> <th>種類Ｃ</th> <th>種類Ｄ</th> </tr> <tr> <th>内容１</th> <td>データ</td> <td>データ</td> <td>データ</td> <td>データ</td> </tr> <tr> <th>内容２</th> <td>データ</td> <td>データ</td> <td>データ</td> <td>データ</td> </tr> <tr> <th>小計</th> <td>データ</td> <td>データ</td> <td>データ</td> <td>データ</td> </tr> <tr> <th>内容３</th> <td>データ</td> <td>データ</td> <td>データ</td> <td>データ</td> </tr> <tr> <th>内容４</th> <td>データ</td> <td>データ</td> <td>データ</td> <td>データ</td> </tr> <tr> <th>内容５</th> <td>データ</td> <td>データ</td> <td>データ</td> <td>データ</td> </tr> <tr> <th>小計</th> <td>データ</td> <td>データ</td> <td>データ</td> <td>データ</td> </tr> <tr> <th>合計</th> <td>データ</td> <td>データ</td> <td>データ</td> <td>データ</td> </tr> <tr> <th>割引</th> <td>データ</td> <td>データ</td> <td>データ</td> <td>データ</td> </tr> </table> </div> ※数値、色は適宜差し替えてください。
1人がナイス！しています
