Получите каждый квадрат <td> любой ширины таблицы

Question

Я создаю календарь в html & css. Этот календарь находится в таблице (автоматически генерируется в php). 1 TR включает 7 TD за каждую неделю. Эта таблица имеет переменную ширину, поэтому ширина TD также является переменной. Моя проблема в том, что я хотел бы, чтобы все TD были квадратными. Для каждого TD ширина будет равна высоте, для любой ширины таблицы. И это не работает, и я не нашел ответов на google. Спасибо заранее!

Calendar image •

Календарь код CSS:

#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; 
} 

Календарь HTML код:

<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> 

Answer 1

Это должно б e довольно просто, используя методы от Grid of responsive squares для сетки чувствительных квадратов.

EDIT Испытано это здесь: https://jsfiddle.net/MarkSchultheiss/w28nuuk5/

Вот CSS адаптировано от вашего:

#calendar 
{ 
    width: 100%; 
} 
td { 
    width: 14%; 
    position: relative; 
     text-align: center; 
     padding: 10px; 
} 
td:after { 
    content: ''; 
    display: block; 
    margin-top: 100%; 
} 
td a { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: white; 
    color:black; 
    padding: 10px; 
} 
#calendar caption 
{ 
    color: white; 
    background-color: #e74c3c; 
} 
#calendar tr td a:hover 
{ 
    background-color: red; 
} 

Answer 2

Пусть высота стола равна его ширине с JavaScript, а затем установить <td> размер, используя проценты.

document.getElementById("calendar").style.height = document.getElementById("calendar").width;

table { 
 
    border-collapse: collapse; 
 
    display: inline-block; 
 
} 
 

 
td { 
 
    width: 14.2%; 
 
    height: 16.6%; 
 
} 
 

 
#calendar 
 
{ 
 
    width: 100%; 
 
} 
 

 
#calendar caption 
 
{ 
 
    color: white; 
 
    background-color: #e74c3c; 
 
} 
 

 
#calendar td, #calendar th 
 
{ 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    text-align: center; 
 
    background-color: white; 
 
} 
 

 
#calendar td:hover 
 
{ 
 
    background-color: red; 
 
} 
 

 
#calendar td a 
 
{ 
 
    color: black; 
 
}

<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>