html - 将每个 <td> 正方形设为任意表格宽度-6ren

html - 将每个正方形设为任意表格宽度

转载作者：行者123 更新时间：2023-11-28 01:16:02

27

4

<分区>

我正在用 html 和 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>