CSS3メディアクエリでテーブル組のカレンダーをレスポンシブで縦型に切り替える

1
<div id="mini-calendar">
2
  <div class="calendar-head"><p class="calendar-year-month">2017年5月</p></div>
3
  <table>
4
    <thead>
5
    <tr>
6
      <th class="calendar-sun">日</th>
7
      <th>月</th>
8
      <th>火</th>
9
      <th>水</th>
10
      <th>木</th>
11
      <th>金</th>
12
      <th class="calendar-sat">土</th>
13
    </tr>
14
    </thead>
15
    <tbody>
16
    <tr>
17
      <td class="calendar-none">&nbsp;</td>
18
      <td><i class="calendar-day-number">1</i>
19
        <div class="calendar-labels">
20
          <span class="calender-label-blue">イベント1</span>
21
        </div>
22
      </td>
23
      <td><i class="calendar-day-number">2</i>
24
        <div class="calendar-labels">
25
          <span class="calender-label-red">イベント2</span>
26
        </div>
27
      </td>
28
      <td class="calendar-holiday"><i class="calendar-day-number">3</i>
29
        <div class="calendar-labels">
30
          <span class="calender-label-green">イベント3</span>
31
          <span class="calender-label">イベント4</span>
32
        </div>
33
      </td>
34
      <td class="calendar-holiday"><i class="calendar-day-number">4</i>
35
        <div class="calendar-labels"></div>
36
      </td>
37
      <td class="calendar-holiday"><i class="calendar-day-number">5</i>
38
        <div class="calendar-labels">
39
          <span class="calender-label-blue">イベント5</span>
40
          <span class="calender-label-red">イベント6</span>
41
        </div>
42
      </td>
43
      <td class="calendar-sat"><i class="calendar-day-number">6</i>
44
        <div class="calendar-labels"></div>
45
      </td>
46
    </tr>
47
    ......
48
    </tbody>
49
  </table>
50
</div>

1
@media screen and (max-width: 600px) {
2
  #mini-calendar thead {
3
    display: none;
4
  }
5
  #mini-calendar th,
6
  #mini-calendar td {
7
    display: block;
8
    width: 100%;
9
    padding: 0;
10
  }
11
  #mini-calendar td {
12
    height: auto;
13
    display: -webkit-flex;
14
    display: flex;
15
  }
16
  #mini-calendar .calendar-none {
17
    display: none
18
  }
19

20
  #mini-calendar .calendar-labels {
21
    padding: 5px;
22
  }
23
  #mini-calendar [class*=calender-label] {
24
    display: inline-block;
25
    padding: 5px;
26
    margin-top: 0;
27
    margin-right: 5px;
28
    font-size: 12px;
29
  }
30

31
  /* 日付 */
32
  #mini-calendar td .calendar-day-number {
33
    font-weight: normal;
34
    padding: 7px;
35
    font-size: 18px;
36
    display: block;
37
    background: #f2e6cd;
38
    margin-bottom: 0;
39
    width: 75px;
40
    height: auto;
41
  }
42
  #mini-calendar td.calendar-holiday .calendar-day-number,
43
  #mini-calendar td.calendar-sun .calendar-day-number {
44
    background: #f8c7c7;
45
  }
46
  #mini-calendar td.calendar-sat .calendar-day-number {
47
    background: #c8ebfe;
48
  }
49
  /* モバイル用曜日を追加 */
50
  #mini-calendar td i:after {
51
    font-size: 12px;
52
    position: relative;
53
    left: -5px;
54
  }
55
  #mini-calendar td:nth-child(1) i:after {
56
    content: "（日）";
57
  }
58
  #mini-calendar td:nth-child(2) i:after {
59
    content: "（月）";
60
  }
61
  #mini-calendar td:nth-child(3) i:after {
62
    content: "（火）";
63
  }
64
  #mini-calendar td:nth-child(4) i:after {
65
    content: "（水）";
66
  }
67
  #mini-calendar td:nth-child(5) i:after {
68
    content: "（木）";
69
  }
70
  #mini-calendar td:nth-child(6) i:after {
71
    content: "（金）";
72
  }
73
  #mini-calendar td:nth-child(7) i:after {
74
    content: "（土）";
75
  }
76
}