scss レスポンシブテーブル

Posted 2021-05-17

// 2列
table.demo01
  tbody
    tr
      th CSS
      td Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、…省略
    tr
      th レスポンシブデザイン
      td 表示された機器の種類やサイズに応じて…省略

table {
    width: 100%;
}
th, td {
  padding: 10px;
  border: 1px solid #ddd;
}
th {
  background: #f4f4f4;
}

/*----------------------------------------------------
  .demo01
----------------------------------------------------*/

.demo01 th {
  width: 30%;
  text-align: left;
}

@media only screen and (max-width: 480px) {
  .demo01 {
    margin: 0 -10px;
    th, td {
      width: 100%;
      display: block;
      border-top: none;
    }
    tr:first-child th {
      border-top: 1px solid #ddd;
    }
  }
}