Aligning boxes in a table (calendar) - html

Question

I am working on a calendar set up and implemented it using a table. However, I am struggling to get the boxes to fill the calendar. My html currently looks like this:
<div id="cal">
<div class="header">
<span class="left button" id="prev"> 〈 </span>
<span class="month-year" id="label"> June 2017 </span>
<span class="right button" id="next"> 〉 </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>
and my css looks like this:
#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;
}
I want the boxes to be even and fill the full calendar (they currently do not do so). Any input would be much appreciated. Thank you!

Answer 1

Hey Change the following CSS into
Old One :
#cal td {
height:25%;
width: 17%;
color:#2b2b2b;
position:relative;
line-height:30px;
/*text-align:center;*/
border:1px solid #e6e6e6;
cursor:default;
}
New One :
\#cal td {
height:25%;
width: 1%;
color:#2b2b2b;
position:relative;
line-height:30px;
text-align:center;
border:1px solid #e6e6e6;
cursor:default;
}
Note the change of text-align and width.