如何讓這兩個日曆顯示在海誓山盟旁邊？

Question

我有兩個簡單的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">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</span></td><td><span class="date">&nbsp;</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">&nbsp;</span></td><td><span class="date">&nbsp;</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">&nbsp;</span></td><td><span class="date">&nbsp;</span></td></tr> 
</table> 

Answer 1

這是一個簡單的方法來做到這一點。將它們放置在容器：

<div class="calendar"> 
    <div class="title">June 2014</div> 
    <table>...</table> 
</div> 
<div class="calendar"> 
    <div class="title">July 2014</div> 
    <table>...</table> 
</div> 

，並將這些容器顯示爲直列塊：

.calendar { 
    display:inline-block; 
} 

參見：JSFiddle

他們將側留一側只要頁面寬度並排並排。

如果你希望他們總是並排，即使他們不適合在窗口（你需要橫向滾動），然後將含有它們的外部容器內的容器，和使該容器的寬度爲適合兩個日曆的固定的大小。

Answer 2

你可以像下面這樣做。鏈接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">&nbsp;</span></td> 
     <td><span class="date">&nbsp;</span></td> 
     <td><span class="date">&nbsp;</span></td> 
     <td><span class="date">&nbsp;</span></td> 
     <td><span class="date">&nbsp;</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">&nbsp;</span></td> 
      <td><span class="date">&nbsp;</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">&nbsp;</span></td> 
      <td><span class="date">&nbsp;</span></td> 
     </tr> 
    </table> 
     </td> 
    </tr> 
</table>