Question

我正在创建一个html＆amp; amp;中的日历。 CSS。这个日历在一个表中（在php中自动生成）。 1 TR包括每周7 TD。该表具有可变宽度，因此TD的宽度也是可变的。我的问题是我希望所有TD都是方形的。对于每个TD，宽度等于高度，对于表的任何宽度。它不起作用，我没有在谷歌找到答案。提前谢谢！

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

这应该相当简单，使用Grid of responsive squares中的技术来处理响应方格的网格。

编辑在此处进行了测试：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>大小。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

将每个正方形放到任何桌子宽度

2 个答案: