Question

我正在使用HTML表创建日历。我有一个问题，其中每个 td 元素都有一个我要删除的填充。

你可以帮助我，以便td元素中的链接（＆amp; img＆amp; text）扩展td元素的整个宽度，这样你就看不到任何背景了。我是什么想要删除我的图像（内）td元素周围的空间。我之所以不使用css＆amp; background-image而不是img是因为我希望img可以在用户屏幕上进行扩展。

我尝试了很多东西，重置css数据，将每个td，th，tr元素设置为没有填充＆amp;我没有运气。 PS：你知道为什么我的文字没有显示在我的img上吗？

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <style type="text/css" media="all">
        <!--

        html, body, div, form, fieldset, legend, label, img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th, td {  text-align: center;  }  h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }  img { border: 0; } 
        table, tr, td, th, tbody, thead {vertical-align:baseline}

        a:link, a:hover, a:visited, a:active { width: 100%; height: 100%; }
        a:hover                              { background-color: yellow; width: 100%; height: 100%; }

        #col1 { width: 10%; float: left; background-color: blue; }
        #col2 { width: 90%; float: left; text-align: center; }

        #calendar { margin: 2%; width: 100%; }
        #calendar th { }
        #calendar td { background-color: red; } // adding this "padding: 0; margin: 0;" here doesn't work 

        .date { position: relative; } // adding this "padding: 0; margin: 0;" here doesn't work 
        .tile { position: absolute; top: 0px; left: 0px; z-index: 1; }
        .content { z-index: 5; }
        -->
    </style>

</head>

<body>

    <div id="col1">
        <p> sjkdjkjksd </p>
    </div>

    <div id="col2">
        <table id="calendar">
            <tr> <td COLSPAN=7> <img src="Images/1.jpg" alt="January" width="500px" height="300px"/> </td> </tr>
            <tr> <th>Sunday</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> </tr>
            <tr> 
                <td><a class="date" href=""><img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/></a></td> 
                <td><a class="date" href=""><img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/></a></td> 
                <td><a class="date" href=""><img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/></a></td> 
                <td><a class="date" href=""><img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/></a></td> 
                <td><a class="date" href=""><img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/></a></td> 
                <td><a class="date" href=""><img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/></a></td> 
                <td><a class="date" href="">1<img class="tile" src="Images/dateTile.png" width="100px" height="100px" onmouseover="onTileMouseOver(this)" onmouseout="onTileMouseLeave(this)"/></a></td> 
            </tr>

            <tr> <td><a class="date" href="">9</a></td> <td><a class="date" href="">10</a></td> <td><a class="date" href="">11</a></td> <td><a class="date" href="">12</a></td> <td><a class="date" href="">13</a></td> <td><a class="date" href="">14</a></td> <td><a class="date" href="">15</a></td> </tr>
            <tr> <td><a class="date" href="">16</a></td> <td><a class="date" href="">17</a></td> <td><a class="date" href="">18</a></td> <td><a class="date" href="">19</a></td> <td><a class="date" href="">20</a></td> <td><a class="date" href="">21</a></td> <td><a class="date" href="">22</a></td> </tr>
            <tr> <td><a class="date" href="">23</a></td> <td><a class="date" href="">24</a></td> <td><a class="date" href="">25</a></td> <td><a class="date" href="">26</a></td> <td><a class="date" href="">27</a></td> <td><a class="date" href="">28</a></td> <td><a class="date" href="">29</a></td> </tr>
            <tr> <td><a class="date" href="">30</a></td> <td><a class="date" href="">31</a></td> <td><a class="date" href=""></a></td> <td><a class="date" href=""></a></td> <td><a class="date" href=""></a></td> <td><a class="date" href=""></a></td> <td><a class="date" href=""></a></td> </tr> 
        </table>
    </div>

</body>
</html>

Answer 1

您可以尝试查看边框折叠

Answer 2

嘿马克。单元格将根据表格的宽度分配宽度。我不认为你的问题是填充。

如果您想要扩展所有内容，可能需要使用百分比设置您的单元格/ img。摆脱行高/宽度并按表格比例缩放。

#calendar td, #calendar th{position:relative;width:14.28% /*roughly one seventh*/}
#calendar td img, #calendar th img{height:100%;width:100%;position:absolute;top:0;left:0;z-index:-1;}

希望有所帮助。

HTML表格不会删除填充

2 个答案: