掲載内容を見直します。

Question

数々のご指摘を受けたため、掲載内容の見直しを行ってまいります。

Comments

[miyabi_pudding]

現在のHTMLとCSSのコードを記載ください。

[退会済みユーザー]

掲載内容見直し中です。

[miyabi_pudding]

では、できるかできないか、という回答だけでよろしいでしょうか？

[退会済みユーザー]

はい、まずはそれだけでも。

[m.ts10806]

「できます」
あとは頑張ってね

[退会済みユーザー]

掲載内容見直し中です。

[m.ts10806]

次元的に無理なものを除いて大抵のものは「できる」としか言いようがないですよ。
まずは思い付かなくても情報を整理して取り組むところから考えてください。
仕様だけあげて丸投げでは費用の発生する作業依頼です。

[m.ts10806]

作業依頼ですね。QAサイトなので受け付けてません。

[退会済みユーザー]

掲載内容見直し中です。

[m.ts10806]

質問になってない認識がないのでしたら質問はご遠慮ください。
丸投げ作業依頼として本サイトのガイドラインに反しています。

[m.ts10806]

まともな質問に回答する気はありますが、丸投げ作業依頼に応える気はありませんし、そういうサービスではありません。

[yambejp]

今回はレッド、ブルー、オレンジが3名なので横に3つ並べるのが上限だと判断できますが
チームごとのメンバーは3名固定なのでしょうか？

そういう仕様を書かないとこちらがソースを提示しても、「それじゃない」という
不毛なやり取りが続くと思います

[hatena19]

推奨していない質問｜teratail（テラテイル）
https://teratail.com/help/avoid-asking
上記の「丸投げの質問」に該当すると思います。
実現に向けて調べたこと、取り組んだこと、躓いた点を追加してください。

[hatena19]

ヒントを出しておくと、テーブルでするならjqueryでhtmlを書き換えることになりそうです。
Flexbox か Grid を使えば、HTML と CSS だけで実現できると思います。

[oikashinoa]

overflow: scroll;

Answer 1

いちばん原始的な方法としては、「それぞれの幅の表をすべてHTMLに書いておいて、CSSでどれを出すか決める」という方法が考えられます。

Answer 2

様々な方法がありますが、
何かしらの方法できます。
flexや、grideを使えば、
HTMLとCSSだけでやる方法はあるかと。

ただし、tableでやる以上は、JavaScriptにて各行列要素の修正をするか、
メディアクエリで、各パターン別のtable要素の表示・非表示が必要になります。

サンプルは掲示しません。
（丸投げ作業依頼に答える形になるので）

Comments

[退会済みユーザー]

掲載内容見直し中です。

[m.ts10806]

その前にteratailのガイドライン熟読してください。

[退会済みユーザー]

掲載内容見直し中です。

[m.ts10806]

一度この回答でベストアンサーになったのを見たんですが解決の基準かえられたんですかね。
質問本文きちんと調整しないと解決には向かいませんよ。
できれば本回答の回答者が頓珍漢なことを言ってるようにならないような配慮もお願いしたいところ。

Answer 3

保持したデータをつかって幅に合わせて出力するhtmlを変えることですね
出力項目が違うのでflexは無理っぽいです

Answer 4

チーム > 背番号 > 選手名 > ポジション > チーム > 背番号 …
と表を希望の長さ？まで作って、最後に一番左以外の”チーム”を消すなり非表示にすれば
概ねは出来ると思いますよ。(消した”チーム”の幅分を埋めるのは諦める)

Answer 5

数々のご指摘を受けたため、掲載内容の見直しを行ってまいります。
最初の掲載後に仕様面でも曖昧なところが発覚してきてため、課題点を再整理します。
ご回答された皆様、ありがとうございました。

Comments

[yambejp]

回答がついた質問の本文を消してしまうのはルール違反ですよ

[oikashinoa]

悪い内容ではないので、質問本文はもとに戻してください。今の状態はルール違反ですよ。変更履歴から過去の質問確認できます。

個人的な意見ですが、提示されていた表は分かりにくいので止めたほうが良いと思います。

Answer 6

可変長のテーブルと考えると難しそうですが、やってることは等積変形みたいなものなので、単に掛け算して割り算すればいいと思います。
つまり、チームごとにまとめた時の列数nを目標面積（1行n列）とします。
適当な行数mにするとき、(m行n/m列)であれば目標面積と等しいまま表現できます。
しかし、列数は整数なので、n/mは切り上げで丸めましょう。
これで行数と列数は動的に求められるので、見ている値が境界を動いたときに再度テーブルを組みなおせばいいだけです。
この場合は合計の横幅がみている値、切り替わってほしい画面幅が境界になるでしょうか。

画面幅がある程度まで小さくなってくる分には、列の幅の変更だけで対処し、ある値を下回ったら列数を減らす、ということも同様に可能です。