tableで表を作成、レスポンシブ対応させたい

Question

以下のようなpc表示とsp表示のレスポンシブができる表を作成したいのですが、レスポンシブを見込んだhtmlの構造が全く分かりません。
table以外のタグでも試しましたが、実現できないのでお力添えをお願い致します。

<table>
　<tr>
  　<th colspan="３">スタンダードコース (通常コース)</th>
 </tr>
 <tr>
 　<td>
   　<td>日数</td>
     <td>６０日</td>
  　</td>
   <td>
    　<td>回数</td>
      <td>１６回</td>
    </td>
    <td>
      <td>金額</td>
      <td>129,000円</td>
    </td>
　</tr>
 <tr>
   <td colspan="３">パーソナルトレーニング45分 ＋ 有酸素運動15分</td>
 </tr>
</table>

tableタグでなくても全く問題ないです。
どのようにコーディングをすれば良いかご教示頂けますと幸いです。

Comments

[yoshinavi]

解決済みですが、HTML5として見ると、tableが適した使い方と思います。

Answer 1

Bootstrap風に

  <dl class="row">
    <dt class="col-6 col-sm-2">日数</dt>
    <dd class="col-6 col-sm-2">６０日</dd>
    <dt class="col-6 col-sm-2">回数</dt>
    <dd class="col-6 col-sm-2">１６</dd>
    <dt class="col-6 col-sm-2">金額</dt>
    <dd class="col-6 col-sm-2">129,000円</dd>
  </dl>

.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  margin-bottom: 0;
}

.row > * {
  margin: 0;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

@media (min-width: 576px) {
  .col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
}

Comments

[chaso0start]

ご回答有難うございました。解決致しました。

Answer 2

.tr {
  float: left;
  / * 以下略 */
}

<div class="tr">
  <div class="th">日数</div>
  <div class="td">60日</div>
</div>
<div class="tr">
  <div class="th">日数</div>
  <div class="td">60日</div>
</div>
<div class="tr">
  <div class="th">日数</div>
  <div class="td">60日</div>
</div>

Re: chaso0start さん

Comments

[chaso0start]

ご回答有難うございました。解決致しました。

Answer 3

やり方はいくつかあると思いますが、1つの方法を紹介します。

上段、中段の6つの項目、下段をそれぞれdivで囲みます。
上段と下段はpcとspでレイアウトは変わらないのでCSSはfont-sizeくらい変えるだけ。
中段はflexなどで横並びにする。
pcの中段は1段6項目なので、それぞれのwidthを均等(100% / 6)に設定する。
spの中段は1段2項目が3つなのでそれぞれにwidthを50%にすればうまく表示されます。

Comments

[chaso0start]

早々にご回答有難うございました。解決致しました。