Problem with bottom border on a table

**mikealex** · 04-19-2008, 07:12 PM

Hi guys,

I hope that someone might be able to help out here after I have spent days trying to get a little tweak done.

I've made up a little test page to demonstrate the problem:

<html>
<head>
<metahttp-equiv="content-type"content="text/html; charset=ISO-8859-1"/>
<metahttp-equiv="content-language"content="en"/>

<title>Test Page</title>
<style type="text/css">

body
{
margin: 0;
padding: 0;
}

.iconsmall
{
position: absolute;
top: 1px;
right: 1px;
}

.container
{
position: relative;
left:8px;
top:64px;
}

.myTable
{
border: 5px #0000ff solid;
font-family: Arial, Helvetica, sans-serif;
font-size: xx-small;
font-weight: bold;
border-collapse: collapse;
}

.Row
{
height: 30px;
}

.Middle
{
position: relative;
width: 70px;
color: #000000;
border-bottom: 1px #000000 solid;
padding-left: 2px;
padding-right: 2px;
text-align:left;
}

.Ends
{
position: relative;
width:20px;
color: #FFFFFF;
background-color: #000000;
border-bottom: 1px #FFFFFF solid;
padding-left: 2px;
padding-right: 2px;
text-align: center;
}

</style>
</head>
<body>
<div class="container">
<table class="myTable">
<tr class="Row">
<td class="Ends">
1
</td>
<td class="Middle">
Short Text
<img alt="" class="iconsmall" id="Img1" src="http://www.afterstep.org/data/php/desktop/bars/button_sq10x10.png"/>
</td>
<td class="Ends">
4
</td>
</tr>
<tr class="Row">
<td class="Ends">
2
</td>
<td class="Middle">
This some long text
<img alt="" class="iconsmall" id="Img2" src="http://www.afterstep.org/data/php/desktop/bars/button_sq10x10.png"/>
</td>
<td class="Ends">
5
</td>
</tr>
<tr class="Row">
<td class="Ends">
3
</td>
<td class="Middle">
Short text
<img alt="" class="iconsmall" id="Img3" src="http://www.afterstep.org/data/php/desktop/bars/button_sq10x10.png"/>
</td>
<td class="Ends">
6
</td>
</tr>
</table>
</div>
</body>
</html>

All I'm trying to do is remove the two white lines underneath the "3" and "6" boxes. I know why they're there, but I can't think of a trick to get rid of them. I tried a negative margin on the bottom border of the table but that didn't work.

Any ideas anyone? I'd really appreciate if anyone has an elegant solution for this (other than having the last row as a different class).

Thanks a lot,

Mike

**PA Eddie** · 04-19-2008, 10:18 PM

Your going to have the remove the attribute for the 2px wide or w/e border on the ends css, or it's going to show up.

**wayfarer07** · 12:40 AM

try adding this to your CSS file:

table {
display: none !important;
}

If your whole site disappears upon doing this, you're doing something wrong.

**LadynRed** · 04-20-2008, 10:39 AM

wayfarer, as much as *I* despise tables for layout, that is NOT helpful at all.

Mike, you don't NEED all that positioning. You really shouldn't waste your time using tables for layout, that is not the way of modern web design. Tables were meant for tabular data - period.

If you want to get rid of the bottom border ONLY on those last sections, create a class in your css that REMOVES the border.

**mikealex** · 04-20-2008, 07:49 PM

Hi,

Thanks for the replies (and the sarcasm)

I despise tables as much as the next guy, but unfortunately I'm dealing with a table that is returned from a web-service that I have to reformat for display. The web service is out of my control and can't be changed.

I toyed with the idea of XSL-ing the table into a bunch of DIVs and using CSS to lay those out, but since I was so close I really didn't want to go to all that effort (especially as my XSL is pretty rusty).

**LadynRed** · 04-21-2008, 10:15 AM

Quote:

I'm dealing with a table that is returned from a web-service that I have to reformat for display.

Let me guess.. ASP .NET ??

Did you try the class to remove the border ?

**mikealex** · 04-21-2008, 11:30 PM

Hi LadynRed,

> Did you try the class to remove the border ?

I don't really know what you mean... Sorry...

Did you mean that I have to create two different classes (say .EndsBottom and .MiddleBottom) that don't have the border-bottom attribute and assign them to the last row in the table? I was hoping to avoid that as the table could actually have a variable number of rows in real life.

Or did you mean something else?

I was hoping that I could fudge the border on the whole table to move the bottom border up 1 pixel to overlay the bottom border of the last row, but I couldn't figure out how.

I appreciate the assistance by the way :-)

Thanks,

Mike

**LadynRed** · 04-22-2008, 12:17 PM

Quote:

Did you mean that I have to create two different classes (say .EndsBottom and .MiddleBottom) that don't have the border-bottom attribute and assign them to the last row in the table?

Yes, that's what I was getting at. The variable rows does complicate things.

Quote:

I was hoping that I could fudge the border on the whole table to move the bottom border up 1 pixel to overlay the bottom border of the last row,

That might work - if you weren't using tables - which will always stretch to contain their contents.

**mikealex** · 05-01-2008, 09:29 AM

Alright - I had another thought....

I might be able to grab the HTML that comes back from the web service and replace all <tr>, <td> etc elements with <div> elements. That way I'd just end up having a bunch of nested DIVs, and the evil table is gone.

I tried mocking that up, and I dunno, I just couldn't get it to look right. The vertical centering of the text was tricky (I didn't end up solving it), and I couldn't get the little images to go where they should.

Anyone care to help me out? (The code above should be fine, just replace all the table elements with DIVs)