テスト投稿

  • 2018年2月28日

1.tdタグに独自属性を付与する

開催日 開催地 イベント内容 詳細
X月1日 全国 展示即売会1 詳細を見る
X月2日 全国 展示即売会2 詳細を見る
<table border="0" cellpadding="0" cellspacing="0" class="table_sp1">
  <thead>
    <tr>
      <th>開催日</th>
      <th>開催地</th>
      <th>イベント内容</th>
      <th>詳細</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="【掲載日】">X月1日</td>
      <td data-label="【開催地】">全国</td>
      <td data-label="【イベント内容】">展示即売会</td>
      <td data-label="【詳細】"><a href="#">詳細を見る</a></td>
    </tr>
    <tr>
      <td data-label="【掲載日】">X月2日</td>
      <td data-label="【開催地】">全国</td>
      <td data-label="【イベント内容】">展示即売会2</td>
      <td data-label="【詳細】"><a href="#">詳細を見る</a></td>
    </tr>
  </tbody>
</table>
@media screen and (max-width: 768px) {
  table.table_sp1 thead {
    display: none;
  }

  table.table_sp1,
  table.table_sp1 tbody,
  table.table_sp1 tr,
  table.table_sp1 th,
  table.table_sp1 td {
    display: block;
    width: auto;
  }

  table.table_sp1 tr td:first-of-type {
    background-color: #F2F2F2;
  }

  table.table_sp1 tr.table_sp_none {
    display: none;
  }

  table.able_sp1 td:before {
    content: attr(data-label);
  }
}

tdタグをSP表示時のみdisplay:blockにすること、また:beforeでdata-labelをcontentとして出力すること。

2.リスト風表示

開催日 開催地 イベント内容 詳細
X月1日 全国 展示即売会1 詳細を見る
X月2日 全国 展示即売会2 詳細を見る
<table border="0" cellpadding="0" cellspacing="0" class="table_sp2">
  <thead>
    <tr>
      <th>開催日</th>
      <th>開催地</th>
      <th>イベント内容</th>
      <th>詳細</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="center">X月1日</td>
      <td>全国</td>
      <td>展示即売会1</td>
      <td><a href="#">詳細を見る</a></td>
    </tr>
    <tr>
      <td align="center">X月2日</td>
      <td>全国</td>
      <td>展示即売会2</td>
      <td><a href="#">詳細を見る</a></td>
    </tr>
  </tbody>
</table>
@media screen and (max-width: 768px) {
  table.table_sp2 {
    border: none!important;
  }
  table.table_sp2 thead {
    display: none;
  }
  table.table_sp2 tbody, table.table_sp2 tr {
    display: block;
  }
  table.table_sp2 td {
    display: list-item;
    border: none;
    margin-left: 20px;
  }
  table.table_sp2 tr td:first-of-type {
    display: block;
    background-color: #F2F2F2;
    margin-left: 0px;
  }
}

3.横スクロールバーを全体に設置

開催日 開催地 イベント内容 詳細
X月1日 全国 展示即売会1 詳細を見る
X月2日 全国 展示即売会2 詳細を見る
<div class="table_wrap">
<table border="0" cellpadding="0" cellspacing="0" class="table_sp">
  <thead>
    <tr>
      <th>開催日</th>
      <th>開催地</th>
      <th>イベント内容</th>
      <th>詳細</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="center" area-label="【掲載日】">X月XX日</td>
      <td area-label="【開催地】">全国</td>
      <td area-label="【イベント内容】">展示即売会</td>
      <td align="center" area-label="【詳細】"><a href="#">詳細を見る</a></td>
    </tr>
  </tbody>
</table>
</div>

 

@media screen and (max-width: 768px) {
  .table_wrap {
    width: 100%;
    overflow-x: scroll;
  }
}

 

-未分類

Copyright© solidstep , 2008-2019 AllRights Reserved.