I'm creating a calendar in html & css. This calendar is in a table (automaticaly generated in php). 1 TR includes 7 TD for each week. This table has variable width, so the widths of TD are also variable. My problem is that I would like that all TD are square. Would have for each TD the width is equal to the height, for any width of the table. And that it does not work and I have not found answers on google. Thank you in advance !
Calendar CSS code :
#calendar
{
width: 100%;
}
#calendar caption
{
color: white;
background-color: #e74c3c;
}
#calendar td, #calendar th
{
padding: 10px;
text-align: center;
background-color: white;
}
#calendar td:hover
{
background-color: red;
}
#calendar td a
{
color: black;
}
Calendar HTML code :
<table id="calendar" cellspacing="0">
<tr>
<th>Lu</th>
<th>Ma</th>
<th>Me</th>
<th>Je</th>
<th>Ve</th>
<th>Sa</th>
<th>Di</th>
</tr>
<tr>
<td><a href='event.php?d=01/02/2016'><div class='full'>1</div></a></td>
<td><a href='event.php?d=02/02/2016'><div class='full'>2</div></a></td>
<td><a href='event.php?d=03/02/2016'><div class='full'>3</div></a></td>
<td><a href='event.php?d=04/02/2016'><div class='full'>4</div></a></td>
<td><a href='event.php?d=05/02/2016'><div class='full'>5</div></a></td>
<td><a href='event.php?d=06/02/2016'><div class='full'>6</div></a></td>
<td><a href='event.php?d=07/02/2016'><div class='full'>7</div></a></td>
</tr>
<tr>
<td><a href='event.php?d=08/02/2016'><div class='full'>8</div></a></td>
<td><a href='event.php?d=09/02/2016'><div class='full'>9</div></a></td>
<td class='event'><a href='event.php?d=10/02/2016'><div class='full'>10</div></a></td>
<td><a href='event.php?d=11/02/2016'><div class='full'>11</div></a></td>
<td><a href='event.php?d=12/02/2016'><div class='full'>12</div></a></td>
<td><a href='event.php?d=13/02/2016'><div class='full'>13</div></a></td>
<td><a href='event.php?d=14/02/2016'><div class='full'>14</div></a></td>
</tr>
<tr>
<td class='event'><a href='event.php?d=15/02/2016'><div class='full'>15</div></a></td>
<td class='event'><a href='event.php?d=16/02/2016'><div class='full'>16</div></a></td>
<td class='event'><a href='event.php?d=17/02/2016'><div class='full'>17</div></a></td>
<td class='event'><a href='event.php?d=18/02/2016'><div class='full'>18</div></a></td>
<td><a href='event.php?d=19/02/2016'><div class='full'>19</div></a></td>
<td><a href='event.php?d=20/02/2016'><div class='full'>20</div></a></td>
<td><a href='event.php?d=21/02/2016'><div class='full'>21</div></a></td>
</tr>
<tr>
<td><a href='event.php?d=22/02/2016'><div class='full'>22</div></a></td>
<td><a href='event.php?d=23/02/2016'><div class='full'>23</div></a></td>
<td><a href='event.php?d=24/02/2016'><div class='full'>24</div></a></td>
<td><a href='event.php?d=25/02/2016'><div class='full'>25</div></a></td>
<td><a href='event.php?d=26/02/2016'><div class='full'>26</div></a></td>
<td><a href='event.php?d=27/02/2016'><div class='full'>27</div></a></td>
<td class='today'><a href='event.php?d=28/02/2016'><div class='full'>28</div></a></td>
</tr>
<tr>
<td><a href='event.php?d=29/02/2016'><div class='full'>29</div></a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>