Extra space in table rows

Hello,

How do i get rid of extra space above and below divs within table rows? I have a background color set for <td>s and white divs appear inside the <td>s. Somehow the background color peeks through above and below the divs. How do I get rid of the extra space without giving the td a height setting? (Note: removing the background color is not optional). Thanks.

My code:


<html>
<head>
<style>

table {
border-collapse: collapse;
border-spacing: 0;
vertical-align: top;
border: 1px solid #b8b9b4;
padding: 0;
margin: 0;
}

table tr {
margin: 0;
padding: 0;
}

table td {
vertical-align: top;
border-left: 1px solid #b8b9b4;
padding: 3px 0;
background-color: #e4e0d7;
}

table td div {
overflow: hidden;
margin: 0;
padding: 4px 10px 0;
height: 20px;
text-align: center;
background-color: #fff;
border-bottom: 1px solid #b8b9b4;
}

</style>
</head>
<body>

<table cellpadding="0" cellspacing=0">
<tr><td><div>Fri 04/02</div></td><td><div>Sat 04/03</div></td><td><div>Sun 04/04</div></td><td><div>Mon 04/05</div></td><td><div>Tue 04/06</div></td><td><div>Wed 04/07</div></td><td><div>Thu 04/08</div></td></tr>
</table>
</body>
</html>

Extra space in table rows

timware

tedster

tangor

timware

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week