テーブル内のボックスの整列（カレンダー）

Question

私はカレンダーを作成し、テーブルを使って実装しています。しかし、私はカレンダーを埋めるために箱を得るのに苦労しています。私のHTMLは現在、次のようになります。

<div id="cal"> 
    <div class="header"> 
     <span class="left button" id="prev"> &lang; </span> 
     <span class="month-year" id="label"> June 2017 </span> 
     <span class="right button" id="next"> &rang; </span> 
    </div> 
    <table id="days"> 
     <td>sun</td> 
     <td>mon</td> 
     <td>tue</td> 
     <td>wed</td> 
     <td>thu</td> 
     <td>fri</td> 
     <td>sat</td> 
    </table> 
    <div id="cal-frame"> 
     <table class="curr"> 
     <tbody> 
      <tr><td class="nil"></td><td class="nil"></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 class="today">11</td><td>12</td></tr> 
      <tr><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</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 class="nil"></td><td class="nil"></td><td class="nil"></td></tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 

と私のCSSは次のようになります。

#cal { 
    -moz-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25); 
    -webkit-box-shadow:0px 3px 3px rgba(0, 0, 0, 0.25); 
    margin:50px auto; 
    font: 13px/1.5 Helvatica, Arial, san-serif; 
    display:table; 
    width:50%; 
    height:70%; 
} 

#cal .header { 
    cursor:default; 
    background: #cd310d; 
    background: -moz-linear-gradient(top, #b32b0c, #cd310d); 
    background: #32CD32; 
    height: 34px; 
    position: relative; 
    color:#fff; 
    -webkit-border-top-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    font-weight:bold; 
    text-shadow:0px -1px 0 #87260C; 
    text-transform: uppercase; 
} 
#cal .header span { 
    display:inline-block; 
    line-height:34px; 
} 

#cal .header .button { 
    width:24px; 
    text-align:center; 
    position:absolute; 
} 
#cal .header .left.button { 
    left:0; 
    -webkit-border-top-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    border-top-left-radius: 5px; 
    border-right:1px solid #fff; 
} 
#cal .header .right.button { 
    right:0; 
    top:0; 
    border-left:1px solid #fff; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-right-radius: 5px; 
} 
#cal .header .button:hover { 
    background: -moz-linear-gradient(top, #d94215, #bb330f); 
    background: #fff; 
    color:#808080; 
} 

#cal .header .month-year { 
    letter-spacing: 1px; 
    width: 100%; 
    text-align: center; 
} 

#cal table { 
    background:#fff; 
    border-collapse:collapse; 
    table-layout: fixed; 
} 
#cal td { 
    height:25%; 
    width: 17%; 
    color:#2b2b2b; 
    position:relative; 
    line-height:30px; 
    /*text-align:center;*/ 
    border:1px solid #e6e6e6; 
    cursor:default; 
} 
#cal #days td { 
    height:26px; 
    line-height: 26px; 
    text-transform:uppercase; 
    font-size:90%; 
    color:#9e9e9e; 
} 
#cal #days td:not(:last-child) { 
    border-right:1px solid #fff; 
} 

#cal #cal-frame td.today { 
    background:#cccccc; 
    color:black; 
    box-shadow:1px 1px 0px #fff inset; 
    -moz-box-shadow:1px 1px 0px #fff inset; 
    -webkit-box-shadow:1px 1px 0px #fff inset; 
} 
#cal #cal-frame td:not(.nil):hover { 
    color:#fff; 
    text-shadow: #6C1A07 0px -1px; 
    background:#CD310D; 
    background: -moz-linear-gradient(top, #b32b0c, #cd310d); 
    background: #8c8c8c; 
    -moz-box-shadow:0px 0px 0px; 
    -webkit-box-shadow:0px 0px 0px; 
} 

#cal #cal-frame td span { 
    font-size:80%; 
    position:relative; 
} 
#cal #cal-frame td span:first-child { 
    bottom:5px; 
} 
#cal #cal-frame td span:last-child { 
    top:5px; 
} 

#cal #cal-frame table.curr { 
    float:left; 
} 
#cal #cal-frame table.temp { 
    position:absolute; 
} 

私は箱にもなると（彼らは現在、そうしません）フルカレンダーを埋めたいです。どんな入力も高く評価されます。ありがとうございました！

Answer 1

ちょっと古いもの

に次のCSSを変更します。

#cal td { 
    height:25%; 
    width: 17%; 
    color:#2b2b2b; 
    position:relative; 
    line-height:30px; 
    /*text-align:center;*/ 
    border:1px solid #e6e6e6; 
    cursor:default; 
} 

を新しいもの：

\#cal td { 
height:25%; 
     width: 1%; 
     color:#2b2b2b; 
     position:relative; 
     line-height:30px; 
     text-align:center; 
     border:1px solid #e6e6e6; 
     cursor:default; 
    } 

注テキスト整列および幅の変化を。