Tables（テーブル）

使い方

  1. テーブルを使う場合は、縦並びを横並びにするデザイン、横並びを縦並びにするデザインから選べます。
  2. 1以外のスタイルについては汎用的なものであれば新たに定義してください。

画面表示

見出し01 内容1が入ります 内容1が入ります 内容1が入ります
見出し01 内容1が入ります 内容1が入ります 内容1が入ります
見出し01 内容1が入ります 内容1が入ります 内容1が入ります
見出し01 見出し01 見出し01 見出し01
内容1が入ります 内容1が入ります 内容1が入ります 内容1が入ります
内容1が入ります 内容1が入ります 内容1が入ります 内容1が入ります

HTML/CSS（Sass）

<!-- テーブルデザイン01（縦並びを横並びにするデザイン） -->
<table class="m-table m-tabledesign">
    <tr class="m-table_tr">
        <th class="m-table_th">見出し01</th>
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
    </tr>
    <tr class="m-table_tr">
        <th class="m-table_th">見出し01</th>
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
    </tr>
    <tr class="m-table_tr last">
        <th class="m-table_th">見出し01</th>
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
    </tr>
</table>


<table class="m-table m-tabledesign02">
    <tr class="m-table_tr">
        <th class="m-table_th">見出し01</th>
        <th class="m-table_th">見出し01</th>
        <th class="m-table_th">見出し01</th>
        <th class="m-table_th">見出し01</th>
    </tr>
    <tr class="m-table_tr">
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
    </tr>
    <tr class="m-table_tr last">
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
        <td class="m-table_td">内容1が入ります</td>
    </tr>
</table>


.m-table {
  margin: 2rem auto;
}
.m-table_th {
  background: #EAEAEA;
  border: solid 0.1rem #ccc;
  padding: 1rem;
}
.m-table_td {
  border: solid 0.1rem #ccc;
  padding: 1rem;
}

@media screen and (max-width: 767px) {
  .m-tabledesign {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .m-tabledesign .last td:last-child {
    border-bottom: solid 1px #ccc;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .m-tabledesign th, .m-tabledesign td {
    border-bottom: none;
    display: block;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .m-tabledesign02 {
    width: 90%;
  }
}
@media screen and (max-width: 767px) {
  .m-tabledesign02 tr {
    display: block;
    float: left;
  }
}
@media screen and (max-width: 767px) {
  .m-tabledesign02 tr td, .m-tabledesign02 tr th {
    border-left: none;
    display: block;
    height: 5rem;
  }
}
@media screen and (max-width: 767px) {
  .m-tabledesign02 thead {
    display: block;
    float: left;
    width: 30%;
  }
}
@media screen and (max-width: 767px) {
  .m-tabledesign02 thead tr {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .m-tabledesign02 tbody {
    display: block;
    float: left;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .m-tabledesign02 tbody tr {
    width: 33%;
  }
}
@media screen and (max-width: 767px) {
  .m-tabledesign02 tr td + td {
    border-left: none;
  }
}
@media screen and (max-width: 767px) {
  .m-tabledesign02 tbody td:last-child {
    border-bottom: solid 0.1rem #ccc;
  }
}
.m-table {
    margin: 2rem auto;
    &_th {
        background: #EAEAEA;
        border: solid 0.1rem #ccc;
        padding: 1rem;
    }
    &_td {
        border: solid 0.1rem #ccc;
        padding: 1rem;
    }
}

// テーブルデザイン01（縦に積むデザイン）
.m-tabledesign {
    @include mq(sp) {
        width: 90%;
    }
    & .last td:last-child {
        @include mq(sp) {
            border-bottom: solid 1px #ccc;
            width: 100%;
        }
    }
    & th,
    & td {
        @include mq(sp) {
            border-bottom: none;
            display: block;
            width: 100%;
        }
    }
}

// テーブルデザイン02（横並びを縦並びにするデザイン）
.m-tabledesign02 {
    @include mq(sp) {
        width: 90%;
    }
    & tr {
        @include mq(sp) {
            display: block;
            float: left;
        }
    }
    & tr td, 
    & tr th {
        @include mq(sp) {
            border-left: none;
            display: block;
            height: 5rem;
        }
    }
    & thead {
        @include mq(sp) {
            display: block;
            float: left;
            width: 30%;
        }
    }
    & thead tr {
        @include mq(sp) {
            width: 100%;
        }
    }
    & tbody {
        @include mq(sp) {
            display: block;
            float: left;
            width: 100%;
        }
    }
    & tbody tr {
        @include mq(sp) {
            width: 33%;
        }
    }
    & tr td + td {
        @include mq(sp) {
            border-left: none;
        }
    }
    & tbody td:last-child {
        @include mq(sp) {
            border-bottom: solid 0.1rem #ccc;
        }
    }
}
TOP