2022/2/11 （更新日: 2022/2/12）

【tableタグ】レスポンシブな会社概要（２列表）の作り方【Flexbox】

CSS

会社概要（２列表）ってどう作るの？

そんな疑問にお答えします。

コーポレイトサイトには会社概要ページがあります。

今回はこのページを２つの方法を使って作ります。

完成形はこちらです。

会社概要PC版

レスポンシブでスマホ時は縦に並べるようにします。

会社概要SP版

それでは見ていきましょう。

1 tableタグ
2 Flexbox

tableタグ

<table>
  <tr>
    <th>会社名</th>
    <td>株式会社◯◯◯◯</td>
  </tr>
  <tr>
    <th>住所</th>
    <td>〒111-1111 東京都◯◯区◯◯1-1-1 ◯◯ビル1F</td>
  </tr>
  <tr>
    <th>電話番号</th>
    <td>03-1234-5678</td>
  </tr>
  <tr>
    <th>代表者</th>
    <td>山田 太郎</td>
  </tr>
  <tr>
    <th>設立</th>
    <td>2022年１月</td>
  </tr>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

th,td {
  padding: 20px 30px;
  border: 1px solid #AAAAAA;
}

th {
  background-color: #CCCCCC;
  width: 150px;
  text-align: left;
}

td {
  width: calc(100% - 150px);
}

@media (max-width: 480px) {
  th,td {
    width: 100%;
    display: block;
  }
}

会社概要ページではtableタグを使う機会が多いのではないでしょうか。

型さえ覚えてしまえば書き方は比較的簡単だと思います。

ここでのポイントは、スマホ時は横並びのthやtdのセルがそのままだと横幅が狭いので、これらをブロック要素に変換して横幅を100%とすることです。

これにより１列できれいに上から並びます。

💡ポイント！　１列表示にする方法

th,td　→　「width: 100%;」「display: block;」

Flexbox

<dl>
  <dt>会社名</dt>
  <dd>株式会社◯◯◯◯</dd>
</dl>
<dl>
  <dt>住所</dt>
  <dd>〒111-1111 東京都◯◯区◯◯1-1-1 ◯◯ビル1F</>
</dl>
<dl>
  <dt>電話番号</dt>
  <dd>03-1234-5678</dd>
</dl>
<dl>
  <dt>代表者</dt>
  <dd>山田 太郎</dd>
</dl>
<dl>
  <dt>設立</dt>
  <dd>2022年１月</dd>
</dl>

dl {
  display: flex;
  justify-content: space-between;
}

dt,dd {
  padding: 20px 30px;
  border: 1px solid #AAAAAA;
}

dt {
  background-color: #CCCCCC;
  width: 150px;
}

dd {
  width: calc(100% - 150px);
}

@media (max-width: 480px) {
  dl {
    flex-direction: column;
  }
  dt,dd {
    width: 100%;
  }
}

dlをdisplay: flex;で横並び、justify-content: space-between;で親要素の左右両端配置とします。

ここでのポイントは、スマホ時にdtとddを縦並びにする方法です。

💡ポイント！　１列表示にする方法