表格在移动视图中从页面上脱落
Tables Falling Off Page in Mobile View
我正在为一个简单的网站创建一个日历页面。我的页面已完成，在桌面视图中看起来不错。当我检查页面是否响应时，表格在移动视图中从页面上脱落。我不知道为什么我的代码无法在移动视图中将 2 列更改为 1 列。如果有人能指出我的代码有什么问题以及如何修复它，我将不胜感激。
.Calendar, th,td{
color: black;
border: 1px solid navy;
background-color: #add8e6;
border-collapse: collapse;
margin-bottom:1%;
margin-top:1%;
}
.eventDay{
background-color:red;
}
.div_left, .div_right{
display: flex;
flex-flow:column;
}
.row_main{
display:flex;
justify-content: space-around;
}
.column{
-moz-column-count: 2;
-webkit-column-count:2;
column-count: 2;
display: flex;
}
@media screen and (max-width: 480px){
.column{
-moz-column-count:1;
-webkit-column-count:1;
column-count:1;
}
.row_main:{
flex-flow:column;
}
}
<div class="row_main">
<div class="column">
<div class="div_left">
<table class="Calendar">
<tr>
<th colspan="8">January 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><div class="eventDay">1</td></div>
<td>2</td>
<td>New Years </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td><div class="eventDay">18</td></div>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>Martin Luther King Day</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td><div class="eventDay">29</td></div>
<td>30</td>
<td>Safety Meeing</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">February 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td><div class="eventDay">15</td></div>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>Presidents' Day</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">March 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td><div class="eventDay">26</td></div>
<td>27</td>
<td> Safety Meeting</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">April 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td><div class="eventDay">2</td></div>
<td>3</td>
<td>Good Friday</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">May 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td><div class="eventDay">28</td></div>
<td>29</td>
<td>Safety Meeting</td>
</tr>
<tr>
<td>30</td>
<td><div class="eventDay">31</td></div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Memorial Day</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">June 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td><div class="eventDay">12</td></div>
<td>12th-13th:Annual Sales Meeting</td>
</tr>
<tr>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>Flag Day</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</th>
</div>
</div>
<div class="column">
<div class="div_right">
<table class="Calendar">
<tr>
<th colspan="8">July 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><div class="eventDay">4</td></div>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td><div class="eventDay">10</td></div>
<td>Independence Day</td>
</tr>
<tr>
<td><div class="eventDay">11</td></div>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>10th-11th:Company Picnic</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td><div class="eventDay">30</td></div>
<td>31</td>
<td>Safety Meeting</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">August 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td><div class="eventDay">7</td></div>
<td> Bicycle Club Fundraisor </td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">September 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<td>Important Dates</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td><div class="eventDay">6</td></div>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>Labor Day</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td><div class="eventDay">24</td></div>
<td>25</td>
<td>Safety Meeting</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">October 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td><div class="eventDay">11</td></div>
<td><div class="eventDay">12</td></div>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td><div class="eventDay">15</td></div>
<td><div class="eventDay">16</td></div>
<td>11th: Columbus Day</td>
</tr>
<tr>
<td><div class="eventDay">17</td></div>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>12th-17th:Annual Convention</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">November 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td><div class="eventDay">11</td></div>
<td>12</td>
<td>13</td>
<td>Veterans Day</th>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td><div class="eventDay">24</td></div>
<td><div class="eventDay">25</td></div>
<td><div class="eventDay">26</td></div>
<td>27</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>28</td>
<td><div class="eventDay">29</td></div>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Safety Meeting</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">December 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><div class="eventDay">1</td></div>
<td><div class="eventDay">2</td></div>
<td><div class="eventDay">3</td></div>
<td><div class="eventDay">4</td></div>
<td>Toys For Tots</td>
</tr>
<tr>
<td><div class="eventDay">5</td></div>
<td><div class="eventDay">6</td></div>
<td><div class="eventDay">7</td></div>
<td><div class="eventDay">8</td></div>
<td><div class="eventDay">9</td></div>
<td><div class="eventDay">10</td></div>
<td><div class="eventDay">11</td></div>
</tr>
<tr>
<td><div class="eventDay">12</td></div>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td><div class="eventDay">15</td></div>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td><div class="eventDay">25</td></div>
<td>Christmas</td>
</tr>
<tr>
<td><div class="eventDay">26</td></div>
<td><div class="eventDay">27</td></div>
<td><div class="eventDay">28</td></div>
<td><div class="eventDay">29</td></div>
<td><div class="eventDay">30</td></div>
<td><div class="eventDay">31</td></div>
<td></td>
<td>Winter Break</td>
</tr>
</table>
</div>
</div>
</div>
在移动设备的媒体查询中为 .row_main 容器添加 flex-direction: column; 以将弹性项目 置于 下方（而不是默认放置它们彼此相邻，即在一条水平线上）
.Calendar,
th,
td {
color: black;
border: 1px solid navy;
background-color: #add8e6;
border-collapse: collapse;
margin-bottom: 1%;
margin-top: 1%;
}
.eventDay {
background-color: red;
}
.div_left,
.div_right {
display: flex;
flex-flow: column;
}
.row_main {
display: flex;
justify-content: space-around;
}
.column {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
display: flex;
}
@media screen and (max-width: 480px) {
.row_main {
flex-direction: column;
}
.column {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
.row_main: {
flex-flow: column;
}
}
<div class="row_main">
<div class="column">
<div class="div_left">
<table class="Calendar">
<tr>
<th colspan="8">January 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<div class="eventDay">1</td>
</div>
<td>2</td>
<td>New Years </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>
<div class="eventDay">18</td>
</div>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>Martin Luther King Day</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>
<div class="eventDay">29</td>
</div>
<td>30</td>
<td>Safety Meeing</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">February 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>
<div class="eventDay">15</td>
</div>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>Presidents' Day</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">March 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>
<div class="eventDay">26</td>
</div>
<td>27</td>
<td> Safety Meeting</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">April 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>
<div class="eventDay">2</td>
</div>
<td>3</td>
<td>Good Friday</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">May 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>
<div class="eventDay">28</td>
</div>
<td>29</td>
<td>Safety Meeting</td>
</tr>
<tr>
<td>30</td>
<td>
<div class="eventDay">31</td>
</div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Memorial Day</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">June 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>
<div class="eventDay">12</td>
</div>
<td>12th-13th:Annual Sales Meeting</td>
</tr>
<tr>
<td>
<div class="eventDay">13</td>
</div>
<td>
<div class="eventDay">14</td>
</div>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>Flag Day</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</th>
</div>
</div>
<div class="column">
<div class="div_right">
<table class="Calendar">
<tr>
<th colspan="8">July 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>
<div class="eventDay">4</td>
</div>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>
<div class="eventDay">10</td>
</div>
<td>Independence Day</td>
</tr>
<tr>
<td>
<div class="eventDay">11</td>
</div>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>10th-11th:Company Picnic</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>
<div class="eventDay">30</td>
</div>
<td>31</td>
<td>Safety Meeting</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">August 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>
<div class="eventDay">7</td>
</div>
<td> Bicycle Club Fundraisor </td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">September 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<td>Important Dates</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>
<div class="eventDay">6</td>
</div>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>Labor Day</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>
<div class="eventDay">24</td>
</div>
<td>25</td>
<td>Safety Meeting</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">October 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>
<div class="eventDay">11</td>
</div>
<td>
<div class="eventDay">12</td>
</div>
<td>
<div class="eventDay">13</td>
</div>
<td>
<div class="eventDay">14</td>
</div>
<td>
<div class="eventDay">15</td>
</div>
<td>
<div class="eventDay">16</td>
</div>
<td>11th: Columbus Day</td>
</tr>
<tr>
<td>
<div class="eventDay">17</td>
</div>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>12th-17th:Annual Convention</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">November 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>
<div class="eventDay">11</td>
</div>
<td>12</td>
<td>13</td>
<td>Veterans Day</th>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>
<div class="eventDay">24</td>
</div>
<td>
<div class="eventDay">25</td>
</div>
<td>
<div class="eventDay">26</td>
</div>
<td>27</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>28</td>
<td>
<div class="eventDay">29</td>
</div>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Safety Meeting</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">December 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<div class="eventDay">1</td>
</div>
<td>
<div class="eventDay">2</td>
</div>
<td>
<div class="eventDay">3</td>
</div>
<td>
<div class="eventDay">4</td>
</div>
<td>Toys For Tots</td>
</tr>
<tr>
<td>
<div class="eventDay">5</td>
</div>
<td>
<div class="eventDay">6</td>
</div>
<td>
<div class="eventDay">7</td>
</div>
<td>
<div class="eventDay">8</td>
</div>
<td>
<div class="eventDay">9</td>
</div>
<td>
<div class="eventDay">10</td>
</div>
<td>
<div class="eventDay">11</td>
</div>
</tr>
<tr>
<td>
<div class="eventDay">12</td>
</div>
<td>
<div class="eventDay">13</td>
</div>
<td>
<div class="eventDay">14</td>
</div>
<td>
<div class="eventDay">15</td>
</div>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>
<div class="eventDay">25</td>
</div>
<td>Christmas</td>
</tr>
<tr>
<td>
<div class="eventDay">26</td>
</div>
<td>
<div class="eventDay">27</td>
</div>
<td>
<div class="eventDay">28</td>
</div>
<td>
<div class="eventDay">29</td>
</div>
<td>
<div class="eventDay">30</td>
</div>
<td>
<div class="eventDay">31</td>
</div>
<td></td>
<td>Winter Break</td>
</tr>
</table>
</div>
</div>
</div>
我正在为一个简单的网站创建一个日历页面。我的页面已完成，在桌面视图中看起来不错。当我检查页面是否响应时，表格在移动视图中从页面上脱落。我不知道为什么我的代码无法在移动视图中将 2 列更改为 1 列。如果有人能指出我的代码有什么问题以及如何修复它，我将不胜感激。
.Calendar, th,td{
color: black;
border: 1px solid navy;
background-color: #add8e6;
border-collapse: collapse;
margin-bottom:1%;
margin-top:1%;
}
.eventDay{
background-color:red;
}
.div_left, .div_right{
display: flex;
flex-flow:column;
}
.row_main{
display:flex;
justify-content: space-around;
}
.column{
-moz-column-count: 2;
-webkit-column-count:2;
column-count: 2;
display: flex;
}
@media screen and (max-width: 480px){
.column{
-moz-column-count:1;
-webkit-column-count:1;
column-count:1;
}
.row_main:{
flex-flow:column;
}
}
<div class="row_main">
<div class="column">
<div class="div_left">
<table class="Calendar">
<tr>
<th colspan="8">January 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><div class="eventDay">1</td></div>
<td>2</td>
<td>New Years </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td><div class="eventDay">18</td></div>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>Martin Luther King Day</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td><div class="eventDay">29</td></div>
<td>30</td>
<td>Safety Meeing</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">February 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td><div class="eventDay">15</td></div>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>Presidents' Day</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">March 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td><div class="eventDay">26</td></div>
<td>27</td>
<td> Safety Meeting</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">April 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td><div class="eventDay">2</td></div>
<td>3</td>
<td>Good Friday</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">May 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td><div class="eventDay">28</td></div>
<td>29</td>
<td>Safety Meeting</td>
</tr>
<tr>
<td>30</td>
<td><div class="eventDay">31</td></div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Memorial Day</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">June 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td><div class="eventDay">12</td></div>
<td>12th-13th:Annual Sales Meeting</td>
</tr>
<tr>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>Flag Day</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</th>
</div>
</div>
<div class="column">
<div class="div_right">
<table class="Calendar">
<tr>
<th colspan="8">July 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><div class="eventDay">4</td></div>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td><div class="eventDay">10</td></div>
<td>Independence Day</td>
</tr>
<tr>
<td><div class="eventDay">11</td></div>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>10th-11th:Company Picnic</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td><div class="eventDay">30</td></div>
<td>31</td>
<td>Safety Meeting</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">August 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td><div class="eventDay">7</td></div>
<td> Bicycle Club Fundraisor </td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">September 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<td>Important Dates</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td><div class="eventDay">6</td></div>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>Labor Day</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td><div class="eventDay">24</td></div>
<td>25</td>
<td>Safety Meeting</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">October 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td><div class="eventDay">11</td></div>
<td><div class="eventDay">12</td></div>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td><div class="eventDay">15</td></div>
<td><div class="eventDay">16</td></div>
<td>11th: Columbus Day</td>
</tr>
<tr>
<td><div class="eventDay">17</td></div>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>12th-17th:Annual Convention</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">November 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td><div class="eventDay">11</td></div>
<td>12</td>
<td>13</td>
<td>Veterans Day</th>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td><div class="eventDay">24</td></div>
<td><div class="eventDay">25</td></div>
<td><div class="eventDay">26</td></div>
<td>27</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>28</td>
<td><div class="eventDay">29</td></div>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Safety Meeting</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">December 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><div class="eventDay">1</td></div>
<td><div class="eventDay">2</td></div>
<td><div class="eventDay">3</td></div>
<td><div class="eventDay">4</td></div>
<td>Toys For Tots</td>
</tr>
<tr>
<td><div class="eventDay">5</td></div>
<td><div class="eventDay">6</td></div>
<td><div class="eventDay">7</td></div>
<td><div class="eventDay">8</td></div>
<td><div class="eventDay">9</td></div>
<td><div class="eventDay">10</td></div>
<td><div class="eventDay">11</td></div>
</tr>
<tr>
<td><div class="eventDay">12</td></div>
<td><div class="eventDay">13</td></div>
<td><div class="eventDay">14</td></div>
<td><div class="eventDay">15</td></div>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td><div class="eventDay">25</td></div>
<td>Christmas</td>
</tr>
<tr>
<td><div class="eventDay">26</td></div>
<td><div class="eventDay">27</td></div>
<td><div class="eventDay">28</td></div>
<td><div class="eventDay">29</td></div>
<td><div class="eventDay">30</td></div>
<td><div class="eventDay">31</td></div>
<td></td>
<td>Winter Break</td>
</tr>
</table>
</div>
</div>
</div>
在移动设备的媒体查询中为 .row_main 容器添加 flex-direction: column; 以将弹性项目 置于 下方（而不是默认放置它们彼此相邻，即在一条水平线上）
.Calendar,
th,
td {
color: black;
border: 1px solid navy;
background-color: #add8e6;
border-collapse: collapse;
margin-bottom: 1%;
margin-top: 1%;
}
.eventDay {
background-color: red;
}
.div_left,
.div_right {
display: flex;
flex-flow: column;
}
.row_main {
display: flex;
justify-content: space-around;
}
.column {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
display: flex;
}
@media screen and (max-width: 480px) {
.row_main {
flex-direction: column;
}
.column {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
.row_main: {
flex-flow: column;
}
}
<div class="row_main">
<div class="column">
<div class="div_left">
<table class="Calendar">
<tr>
<th colspan="8">January 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<div class="eventDay">1</td>
</div>
<td>2</td>
<td>New Years </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>
<div class="eventDay">18</td>
</div>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>Martin Luther King Day</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>
<div class="eventDay">29</td>
</div>
<td>30</td>
<td>Safety Meeing</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">February 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>
<div class="eventDay">15</td>
</div>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>Presidents' Day</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">March 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>
<div class="eventDay">26</td>
</div>
<td>27</td>
<td> Safety Meeting</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">April 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>
<div class="eventDay">2</td>
</div>
<td>3</td>
<td>Good Friday</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">May 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>
<div class="eventDay">28</td>
</div>
<td>29</td>
<td>Safety Meeting</td>
</tr>
<tr>
<td>30</td>
<td>
<div class="eventDay">31</td>
</div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Memorial Day</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">June 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>
<div class="eventDay">12</td>
</div>
<td>12th-13th:Annual Sales Meeting</td>
</tr>
<tr>
<td>
<div class="eventDay">13</td>
</div>
<td>
<div class="eventDay">14</td>
</div>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>Flag Day</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</th>
</div>
</div>
<div class="column">
<div class="div_right">
<table class="Calendar">
<tr>
<th colspan="8">July 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>
<div class="eventDay">4</td>
</div>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>
<div class="eventDay">10</td>
</div>
<td>Independence Day</td>
</tr>
<tr>
<td>
<div class="eventDay">11</td>
</div>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>10th-11th:Company Picnic</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>
<div class="eventDay">30</td>
</div>
<td>31</td>
<td>Safety Meeting</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">August 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>
<div class="eventDay">7</td>
</div>
<td> Bicycle Club Fundraisor </td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">September 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<td>Important Dates</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>
<div class="eventDay">6</td>
</div>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>Labor Day</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>
<div class="eventDay">24</td>
</div>
<td>25</td>
<td>Safety Meeting</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">October 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>
<div class="eventDay">11</td>
</div>
<td>
<div class="eventDay">12</td>
</div>
<td>
<div class="eventDay">13</td>
</div>
<td>
<div class="eventDay">14</td>
</div>
<td>
<div class="eventDay">15</td>
</div>
<td>
<div class="eventDay">16</td>
</div>
<td>11th: Columbus Day</td>
</tr>
<tr>
<td>
<div class="eventDay">17</td>
</div>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>12th-17th:Annual Convention</td>
</tr>
<tr>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
</tr>
<tr>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">November 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>
<div class="eventDay">11</td>
</div>
<td>12</td>
<td>13</td>
<td>Veterans Day</th>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>
<div class="eventDay">24</td>
</div>
<td>
<div class="eventDay">25</td>
</div>
<td>
<div class="eventDay">26</td>
</div>
<td>27</td>
<td>Thanksgiving Break</td>
</tr>
<tr>
<td>28</td>
<td>
<div class="eventDay">29</td>
</div>
<td>30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Safety Meeting</td>
</tr>
</table>
<table class="Calendar">
<tr>
<th colspan="8">December 2021</th>
</tr>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
<th>Important Dates</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<div class="eventDay">1</td>
</div>
<td>
<div class="eventDay">2</td>
</div>
<td>
<div class="eventDay">3</td>
</div>
<td>
<div class="eventDay">4</td>
</div>
<td>Toys For Tots</td>
</tr>
<tr>
<td>
<div class="eventDay">5</td>
</div>
<td>
<div class="eventDay">6</td>
</div>
<td>
<div class="eventDay">7</td>
</div>
<td>
<div class="eventDay">8</td>
</div>
<td>
<div class="eventDay">9</td>
</div>
<td>
<div class="eventDay">10</td>
</div>
<td>
<div class="eventDay">11</td>
</div>
</tr>
<tr>
<td>
<div class="eventDay">12</td>
</div>
<td>
<div class="eventDay">13</td>
</div>
<td>
<div class="eventDay">14</td>
</div>
<td>
<div class="eventDay">15</td>
</div>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>
<div class="eventDay">25</td>
</div>
<td>Christmas</td>
</tr>
<tr>
<td>
<div class="eventDay">26</td>
</div>
<td>
<div class="eventDay">27</td>
</div>
<td>
<div class="eventDay">28</td>
</div>
<td>
<div class="eventDay">29</td>
</div>
<td>
<div class="eventDay">30</td>
</div>
<td>
<div class="eventDay">31</td>
</div>
<td></td>
<td>Winter Break</td>
</tr>
</table>
</div>
</div>
</div>