グラフの使い方について

実現したいこと

セルの数の違うテーブルを作成しようとしています。
それぞれ違うサイズを設定しながらレスポンシブ（横から縦に並べるのみで大丈夫です）も適用できるようにしたいです。

＜サイズ想定＞
セルが2個のものは20％、80％想定
セルが3個のものは20％、50%、30%想定

装飾は現段階では記載していません。

発生している問題・分からないこと

１サイズの違う表を作る際にcolspanを使おうと思っているが適しているか
（widthでは調整ができなかったため、colspanに行き着いたがレスポンシブがやりにくくなってしまうので使うかどうか迷っている）

２レスポンシブの際にtableの中にあるtbodyがtableよりも小さくなってしまうのはなぜか
widthやtable layoutをfixedに変えたが変更がなかった

３そもそもでこの実装は難しい？
データではあるのですが、見栄えがあまりにも悪ければ表示の仕方を考えなければと思います。
display: grid;などを使えば簡単なのですが、あとでページ内で文字を検索したら表示ができるようにしたいのでtableなどの方がいいなどあればお知らせいただけたら幸いです。

該当のソースコード

HTML
1<table class="responsive-table">
2  <tr>
3    <td>テスト1番</td>
4    <td>テスト内容テスト内容テスト内容テスト内容テスト内容テスト内容</td>
5  </tr>
6  <tr>
7    <td>テスト2番</td>
8    <td >テスト内容</td>
9  </tr>
10  <tr>
11    <td>テスト3番</td>
12    <td>テスト内容</td>
13    <td>テスト内容テスト内容テスト内容テスト内容テスト内容</td>
14  </tr>
15  <tr>
16    <td>テスト4番</td>
17    <td >テスト内容</td>
18  </tr>
19  <tr>
20    <td>テスト5番</td>
21    <td>テスト内容</td>
22    <td>テスト内容</td>
23  </tr>
24</table>
25

SCSS
1@charset "UTF-8";
2.responsive-table {
3  width: 100%; /* テーブルの幅を全体に広げる */
4  border-collapse: collapse;
5  border: 1px solid #ddd;
6  table-layout: auto;
7}
8
9.responsive-table td {
10  border: 1px solid #ccc; /* セルの枠線 */
11  padding: 10px;
12  text-align: center; /* テキストを中央揃え */
13}
14
15/* 小さい画面向けのレスポンシブスタイル */
16@media (max-width: 768px) {
17  .responsive-table {
18    display: block; /* テーブルをブロック表示に切り替え */
19  }
20
21  .responsive-table tr {
22    display: block; /* 行をブロック表示 */
23    margin-bottom: 10px; /* 行の間隔 */
24  }
25
26  .responsive-table td {
27    display: block; /* セルをブロック表示 */
28    text-align: left; /* テキストを左揃え */
29    border: none; /* 枠線を非表示 */
30    border-bottom: 1px solid #ddd; /* 下枠線だけ表示 */
31  }
32
33  .responsive-table td:last-child {
34    border-bottom: none; /* 最後のセルの下枠線を削除 */
35  }
36}
37

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

・サイズを変更ということでwidthを変えたりしたのですがそもそもで個数が違うのでサイズが合わなかった
・colspanはHTML上に書くことになるのでレスポンシブ上では大きさが小さくなってしまう

補足

tableをあまり使い慣れていないので、お教えいただけますと幸いです。
よろしくお願い致します。
説明がわかりにくければコメントいただけますと幸いです。

juner

2024/12/02 00:09 編集

現代の tableレイアウトと呼ばれるグリッドレイアウトは試されましたでしょうか？複数階層にわたる場合が昔は問題でしたが、今なら subgrid 使えばだいたいどうにかなるまであります。 https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Subgrid

juner

2024/12/02 00:11

table でサイズが強制できないというのも実は違って、 css でセルに対して min-width / max-width / width を全て設定すると強制できたりします……。（ただし、その通りにできない場合に割合になったりすることもありますが。

juner

2024/12/02 00:30 編集

最終的にどんな形にしたいかがわからないのでどう修正したものか感があります。とりあえず現状的には playground はこんな感じでしょうか……(colspan あり)？ https://livecodes.io/?x=id/eg53nz7kpcb

Lhankor_Mhy

2024/12/02 01:04

> グラフこれは、テーブルの間違いでしょうか？ --- テーブルの自動レイアウトはCSSの仕様として定まっていませんので、厳密なレイアウトには向いていません。 > UAs are not required to implement this algorithm to determine the table layout in the case that table-layout is auto; they can use any other algorithm even if it results in different behavior. （ユーザーエージェントは、table-layout が auto の際にこのアルゴリズムを実装しなくてもかまいません。たとえ違う表示となっても、それぞれのユーザーエージェントは違うアルゴリズムを使うことができます。） https://drafts.csswg.org/css2/#auto-table-layout なお、CSS3で標準アルゴリズムが策定されていますが、まだ実装段階ではないです。 --- ですので、juner さんのおっしゃるとおり、グリッドレイアウトがおすすめです。

yudai1107

2024/12/02 04:19

junerさん結構今回に関しては細々と情報を書き連ねるだけ（商品の使用用途が〇〇、使えるものが✖️✖️など情報の書き込み）が大きいのでこれに関してはgridが良さそうですね。 gridは使い慣れているので大丈夫かなと思います。お答えいただきありがとうございました。 Lhankor_Mhyさん tableの間違いです。失礼しました。情報提供いただきありがとうございます。やはり細かな設定はないのですね。どうしてもグラフでないといけないということはないので、juner さんのおっしゃる通りgridで書いてみようかと思います。お答えいただきありがとうございました！

行動規範の内容に同意します

回答2件

端的にいえば「表」であればtableを使わなくてはなりません。その際列や行が結合されているのであればそれは「構造」なのでそれをどうにかするのはむしろおかしいです。
逆に単にデータの羅列であればtableを使ってはいけません。細かい表示の調整をしたいならすでに指摘があるようにgridがベターです

投稿2024/12/02 01:46

yambejp

総合スコア117203

yudai1107

2024/12/02 04:21

先方に確認したところ、データの羅列的な面が大きいので、どうしても表である必要はないようなのでgridで構造を作ってそこに書き込んでしまおうと思います。その分見栄えを良くできた方が良さそうです。お答えいただきありがとうございます。

行動規範の内容に同意します

ベストアンサー

Gridレイアウトを使えば簡単ですがtableにこだわるなら、レスポンシブ時に tbody と tr に display: contents; を設定してボックスを生成しないようにすれば可能です。

display - CSS: カスケーディングスタイルシート | MDN

css
1.responsive-table td:nth-child(1) {
2  width: 20%;
3}
4.responsive-table td:nth-child(3) {
5  width: 50%;
6}
7/* 小さい画面向けのレスポンシブスタイル */
8@media (max-width: 768px) {
9  .responsive-table {
10    display: block; /* テーブルをブロック表示に切り替え */
11  }
12  .responsive-table tbody, .responsive-table tr {
13    display: contents; /* ボックスを生成しない */
14  }
15
16   .responsive-table td {
17    display: block; /* セルをブロック表示 */
18    text-align: left; /* テキストを左揃え */
19    border: none; /* 枠線を非表示 */
20    border-bottom: 1px solid #ddd; /* 下枠線だけ表示 */
21    width: 100% !important;
22    margin-bottom: 10px; /* 行の間隔 */
23  }
24
25  .responsive-table tr:last-child td:last-child {
26    border-bottom: none; /* 最後のセルの下枠線を削除 */
27  }
28}