HTML table wont removing padding
I am creating a calendar using a HTML table. I have a problem where each td element has a padding in it which I want to remove.
Can you help me so that the link(& the img & text) inside the td element extend the whole width of the td element so you cannot see any of the background. What I want is to remove the space around my images(within) the td elements. The reason why I dont use css & background-image instead of img is because I want the img to be scalable for the users screen.
I have tried many things, resetting the css data, setting each td, th, tr element to have no padding & etc. and I have had no luck. PS: do you know why my text is not being displayed over my 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开发者_JAVA百科> <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>
Hey mack. The cells will distribute their width depending on how wide the table is. I dont think your issue is with padding.
If you want everything to scale you might want to set your cells/img using percentages. Get rid of the in line height/widths and scale them as the table scales.
#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;}
Hope that helps.
You can try looking into border collapse
加载中,请稍侯......
精彩评论