How do you get a <td> border tucked inside the set width?

Forum Moderators: not2easy

Message Too Old, No Replies

How do you get a <td> border tucked inside the set width?

smithaa02

5:55 pm on Mar 20, 2006 (gmt 0)

I want to put a border on the inside of a table cell, but both Firefox and IE put it on the outside. Here's what I have that's not working:

<div style='background-color:blue;width:100px;'>width 100</div>
<table cellpadding='0' cellspacing='0'">
<tr><td style='background-color:red;width:100px;border-right:solid black 5px;'>width 100</td><td style='background-color:green;'>width 100</td></tr>
</table>

jessejump

7:04 pm on Mar 20, 2006 (gmt 0)

Take the border off the TD and inside the TD have:

<div style="border-right:solid black 5px">width 100</div>

smithaa02

7:10 pm on Mar 20, 2006 (gmt 0)

But if I do that then the border will only stretch as tall as the td content is.

<table cellpadding='0' cellspacing='0'>
<tr><td style='width:100px;'><div style='background-color:red;border-right:solid black 5px;'><p>width 100</p></div></td>
<td style='background-color:green;'>width 100<br />line 2</td>
</tr>
</table>

Is it possible to make the div expand vertically as the td does?

doodlebee

2:49 pm on Mar 21, 2006 (gmt 0)

Did you try to add "height:100%" to the inside div?

Alternatively, do you want a border around the inside so each table cell is separated by a 1 or 2 pixel margin, so it looks like little boxes? if so, you could just set the margin of your TD's at 2 px, and leave the border there - then it'll look like little boxes that are separated with whitespace between them.

brrrdog

4:52 pm on Mar 21, 2006 (gmt 0)

Everything that I've tried suggests that this cannot be done without altering the width. Doodlebee has been nice enought to humor my long winded discussion about it here:http://www.webmasterworld.com/forum83/8691.htm

I'm assuming your simplistic example doesn't do much for the full problem you're trying to work around, but in case I'm wrong, here's an example of compinsating for the width:
<!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">
<head>
<title>Untitled Page</title>
</head>
<body style="height: 100%; margin: 0; padding: 0;">
<div style="width: 150px; background-color: Blue">
width 150</div>
<div style="width: 140px; background-color: Lime; border: solid 5px black">
width 140 + 5px border</div>
<table cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td style="width: 140px; background-color: Green; height: 100%; vertical-align: top; border: solid 5px Black;">
width 140 + 5 px border
</td>
<td style="background-color: Red">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
</td>
</tr>
</table>
</body>
</html>