2

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

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>

Cœur
  • 32,421
  • 21
  • 173
  • 232

2 Answers2

1

This should be fairly simple, using the techniques from Grid of responsive squares for a grid of responsive squares.

EDIT Tested it out here: https://jsfiddle.net/MarkSchultheiss/w28nuuk5/

Here is the CSS adapted from yours:

#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;
}
Community
  • 1
  • 1
Mark Schultheiss
  • 28,892
  • 9
  • 63
  • 88
0

Let the table height equal to its width with javascript, then set the <td> size using percentages.

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>
Le____
  • 6,107
  • 3
  • 25
  • 53