我有两个简单的HTML表格日历,但由于某种原因,它们没有挨着彼此。我怎样才能使它们并排?下面是我现在的代码:
<div class="title">June 2014</div>
<table border="1">
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
<tr><td><span class="date">1</span></td><td><span class="date">2</span></td><td><span class="date">3</span></td><td><span class="date">4</span></td><td><span class="date">5</span></td><td><span class="date">6</span></td><td><span class="date">7</span></td></tr>
<tr><td><span class="date">8</span></td><td><span class="date">9</span></td><td><span class="date">10</span></td><td><span class="date">11</span></td><td><span class="date">12</span></td><td><span class="date">13</span></td><td><span class="date">14</span></td></tr>
<tr><td><span class="date">15</span></td><td><span class="date">16</span></td><td><span class="date">17</span></td><td><span class="date">18</span></td><td><span class="date">19</span></td><td><span class="date">20</span></td><td><span class="date">21</span></td></tr>
<tr><td><span class="date">22</span></td><td><span class="date">23</span></td><td><span class="date">24</span></td><td><span class="date">25</span></td><td><span class="date">26</span></td><td><span class="date">27</span></td><td><span class="date">28</span></td></tr>
<tr><td><span class="date">29</span></td><td><span class="date">30</span></td><td><span class="date"> </span></td><td><span class="date"> </span></td><td><span class="date"> </span></td><td><span class="date"> </span></td><td><span class="date"> </span></td></tr>
</table>
<p>
<div class="title">July 2014</div>
<table border="1">
<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
<tr><td><span class="date"> </span></td><td><span class="date"> </span></td><td><span class="date">1</span></td><td><span class="date">2</span></td><td><span class="date">3</span></td><td><span class="date">4</span></td><td><span class="date">5</span></td></tr>
<tr><td><span class="date">6</span></td><td><span class="date">7</span></td><td><span class="date">8</span></td><td><span class="date">9</span></td><td><span class="date">10</span></td><td><span class="date">11</span></td><td><span class="date">12</span></td></tr>
<tr><td><span class="date">13</span></td><td><span class="date">14</span></td><td><span class="date">15</span></td><td><span class="date">16</span></td><td><span class="date">17</span></td><td><span class="date">18</span></td><td><span class="date">19</span></td></tr>
<tr><td><span class="date">20</span></td><td><span class="date">21</span></td><td><span class="date">22</span></td><td><span class="date">23</span></td><td><span class="date">24</span></td><td><span class="date">25</span></td><td><span class="date">26</span></td></tr>
<tr><td><span class="date">27</span></td><td><span class="date">28</span></td><td><span class="date">29</span></td><td><span class="date">30</span></td><td><span class="date">31</span></td><td><span class="date"> </span></td><td><span class="date"> </span></td></tr>
</table>
这里有一个简单的方法。将它们放入容器:
<div class="calendar">
<div class="title">June 2014</div>
<table>...</table>
</div>
<div class="calendar">
<div class="title">July 2014</div>
<table>...</table>
</div>
让这些容器显示为inline-blocks:
.calendar {
display:inline-block;
}
: JSFiddle
只要页面宽度适合并排,它们就会并排。
如果你希望它们总是并排在一起,即使它们不适合窗口(你需要横向滚动),然后将容器放置在包含它们的外部容器中,并使该容器的宽度为固定大小,适合两个日历。
你可以像下面这样做。链接到jsfiddle
<table>
<tr>
<td>
<div class="title">June 2014</div>
< -- Your Table content for June 2014 -->
</td>
<td>
<div class="title">July 2014</div>
< -- Your Table content for July 2014 -->
</td>
</tr>
</table>
和完整的代码…
<table>
<tr>
<td>
<div class="title">June 2014</div>
<table border="1">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td><span class="date">1</span></td>
<td><span class="date">2</span></td>
<td><span class="date">3</span></td>
<td><span class="date">4</span></td>
<td><span class="date">5</span></td>
<td><span class="date">6</span></td>
<td><span class="date">7</span></td>
</tr>
<tr>
<td><span class="date">8</span></td>
<td><span class="date">9</span></td>
<td><span class="date">10</span></td>
<td><span class="date">11</span></td>
<td><span class="date">12</span></td>
<td><span class="date">13</span></td>
<td><span class="date">14</span></td>
</tr>
<tr>
<td><span class="date">15</span></td>
<td><span class="date">16</span></td>
<td><span class="date">17</span></td>
<td><span class="date">18</span></td>
<td><span class="date">19</span></td>
<td><span class="date">20</span></td>
<td><span class="date">21</span></td>
</tr>
<tr>
<td><span class="date">22</span></td>
<td><span class="date">23</span></td>
<td><span class="date">24</span></td>
<td><span class="date">25</span></td>
<td><span class="date">26</span></td>
<td><span class="date">27</span></td>
<td><span class="date">28</span></td>
</tr>
<tr>
<td><span class="date">29</span></td>
<td><span class="date">30</span></td>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
</tr>
</table>
</td>
<td>
<div class="title">July 2014</div>
<table border="1">
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
<tr>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
<td><span class="date">1</span></td>
<td><span class="date">2</span></td>
<td><span class="date">3</span></td>
<td><span class="date">4</span></td>
<td><span class="date">5</span></td>
</tr>
<tr>
<td><span class="date">6</span></td>
<td><span class="date">7</span></td>
<td><span class="date">8</span></td>
<td><span class="date">9</span></td>
<td><span class="date">10</span></td>
<td><span class="date">11</span></td>
<td><span class="date">12</span></td>
</tr>
<tr>
<td><span class="date">13</span></td>
<td><span class="date">14</span></td>
<td><span class="date">15</span></td>
<td><span class="date">16</span></td>
<td><span class="date">17</span></td>
<td><span class="date">18</span></td>
<td><span class="date">19</span></td>
</tr>
<tr>
<td><span class="date">20</span></td>
<td><span class="date">21</span></td>
<td><span class="date">22</span></td>
<td><span class="date">23</span></td>
<td><span class="date">24</span></td>
<td><span class="date">25</span></td>
<td><span class="date">26</span></td>
</tr>
<tr>
<td><span class="date">27</span></td>
<td><span class="date">28</span></td>
<td><span class="date">29</span></td>
<td><span class="date">30</span></td>
<td><span class="date">31</span></td>
<td><span class="date"> </span></td>
<td><span class="date"> </span></td>
</tr>
</table>
</td>
</tr>
</table>