Tables, 1px gap, bottom border only

HTML & CSS
1

I feel like a noob for asking this but I can’t seem to figure out why I am having a 1px gap in the bottom border only for my tables on a website. It only shows when I attempt to use a border at the bottom of a table or a hovered row.

Due to client privacy I can not send a link to the test site, but here is an image of the issue:

If you look at the column divider and follow that down, you can see there is a white spot at the bottom of the selected row as well as the border-bottom of the table. I also see one at the top in Chrome.

CSS attached to tables:


reset.css:
table{
	border-collapse:collapse;
	border-spacing:0;
}

styles.css:
body {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
}
table{margin-bottom:21px;border-bottom:1px solid #bbb;}
td{
        height: 25px;
        line-height: 25px;
        border-right: 1px solid #fff;
        text-align: left;
        padding: 0 8px;
        color: #555;
}
tr.hover{
            border: 1px solid #bbb;
            background: #ffffff; /* Old browsers */
            background: -moz-linear-gradient(top,  #ffffff 0%, #e2e2e2 100%); /* FF3.6+ */
            background: -webkit-linear-gradient(top,  #ffffff 0%,#e2e2e2 100%); /* Chrome10+,Safari5.1+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-8 */
            -webkit-box-shadow:  1px 0px 2px 1px rgba(0, 0, 0, .17);
            box-shadow:  1px 0px 2px 1px rgba(0, 0, 0, .17);
            cursor: pointer;
}
tr.hover td{background:none !important;border:none !important;}
th.last,td.last{border-right:none !important;}

And here is the table itself:


<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<thead>
		<tr>
			<th>Date</th>
			<th class="last">Description</th>
		</tr>
	</thead>
		<tbody>
			<tr>
				<td>01/12/2012</td>
				<td class="last">Fractured tibia</td>
			</tr>
			<tr class="hover">
				<td class="bg_blue">01/12/2012</td>
				<td class="bg_blue last">Diagnosed Type II Diabetes</td>
			</tr>
			<tr>
			        <td>01/12/2012</td>
				<td class="last">Heart Attack</td>
			</tr>
		</tbody>
</table>

I’ve tried adding a border to the td and it also stops at that spot. At this point I’ve exhausted my ideas and my Google Fu is not pulling up anything. I did not grow up in the age of tables so not sure if there are hidden nuggets out there that would help this issue.

Any help is greatly appreciated.
Thanks,
Justin

2

This line is causing the problem:

td {
        border-right: 1px solid #fff;
}

It doesn’t actually seem to be needed, so perhaps just remove it. :slight_smile:

3

Yeah, it’s there to match the th, but now that I think about it you may be right, may not need that there actually. I’ll have to try it tomorrow when I get back in the office. Thanks for the idea! I’ll let you know if it works.

4

solved, turns out I don’t need a border, the table takes it into account when creating the widths of the tds below the ths, thanks =)