基本的な表組み

Example code
<table class="baseTable">
  <tr>
    <th>見出し1</th>
    <td>ここに内容が入ります</td>
  </tr>
  <tr>
    <th>見出し2</th>
    <td>ここに内容が入ります</td>
  </tr>
  <tr>
    <th>見出し3</th>
    <td>ここに内容が入ります</td>
  </tr>
</table>

Example code
<table class="baseTable">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>ここに内容が入ります</td>
    <td>ここに内容が入ります</td>
    <td>ここに内容が入ります</td>
  </tr>
</table>

基本的な表組み（スマホ対応）

Example code
<table class="baseTable baseTable__sp">
  <tr>
    <th>見出し1</th>
    <td>ここに内容が入ります</td>
  </tr>
  <tr>
    <th>見出し2</th>
    <td>ここに内容が入ります</td>
  </tr>
  <tr>
    <th>見出し3</th>
    <td>ここに内容が入ります</td>
  </tr>
</table>

2要素横並び（table版）

Example code
<table class="menuTable rowBox__2elem">
  <tbody class="boxInner">
    <tr>
      <th>ウーロン茶</th>
      <td>300円</td>
    </tr>
    <tr>
      <th>コーラ</th>
      <td>300円</td>
      </tr>
  </tbody>
  <tbody class="boxInner">
    <tr>
      <th>オレンジジュース</th>
      <td>300円</td>
    </tr>
    <tr>
      <th>ノンアルコールビール</th>
      <td>450円</td>
    </tr>
  </tbody>
</table>

※table要素に「rowBox__2elem」のクラスを付与し、子要素の tbodyに「boxInner」のクラスを付与します。
※逆並びの場合 class="rowBox__2elem--reverse"
※スマホ表示のときは縦並びになります。

3要素横並び（table版）

Example code
<table class="menuTable rowBox__3elem">
  <tbody class="boxInner">
    <tr>
      <th>生ビール</th>
      <td>540円</td>
    </tr>
    <tr>
      <th>焼酎（芋・麦・米）</th>
      <td>432円</td>
    </tr>
  </tbody>
  <tbody class="boxInner">
    <tr>
      <th>日本酒（冷、熱燗）1合</th>
      <td>540円</td>
    </tr>
    <tr>
      <th>チューハイ各種</th>
      <td>480円</td>
    </tr>
  </tbody>
  <tbody class="boxInner">
    <tr>
      <th>カクテル各種</th>
      <td>520円</td>
    </tr>
  </tbody>
</table>