Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

css borders - clutching at straws 1

Status
Not open for further replies.
j111111

j111111

Technical User
Dec 13, 2002
46
GB
Is there any way possible to use css to apply a border to just part of one side of a table?
(eg if the table is 300px, just apply a border to 200px of the bottom of it)
I very much doubt this is possible but if anyone has any suggestions of doing this (css or otherwise) it would be very helpful.
 
Sort by date Sort by votes
suggestions?
try this...
a table 3*3 border on the left side only. change the height to you desired value.

<table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; >
<tr>
<td rowspan=&quot;3&quot; valign=&quot;top&quot;>
<table border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td width=&quot;2px&quot; bgcolor=&quot;#000000&quot; height=&quot;30px&quot;></td>
</tr>
</table></td>
<td>Contents #1 </td>
<td>Contents #2</td>
</tr>
<tr>
<td>Contents #1 </td>
<td>Contents #2</td>
</tr>
<tr>
<td>Contents #1 </td>
<td>Contents #2</td>
</tr>
</table>



good luck
grtfercho çB^]\..
 
Upvote 0 Downvote
It depends what you want to use the table for (I mean the content of the table) but maybe this example is what you mean ??

<HTML>
<HEAD>
<TITLE></TITLE>
<style>
.noborder
{
border-width:0px;
}
.lefttop
{
border-left-width:2px;
border-top-width:2px;
border-color:green;
text-align:center;
}
.midtop
{
border-top-width:2px;
border-color:green;
text-align:center;
}
.righttop
{
border-top-width:2px;
border-right-width:2px;
border-color:green;
border-right-color:red;
text-align:center;
}
.leftmid
{
border-left-width:2px;
border-bottom-width:2px;
border-color:green;
text-align:center;
}
.midmid
{
border-bottom-width:2px;
border-color:green;
text-align:center;
}
.rightmid
{
border-bottom-width:2px;
border-right-width:2px;
border-color:green;
border-right-color:red;
text-align:center;
}
.leftbottom
{
border-width:0px;
text-align:center;
}
.midbottom
{
border-width:0px;
text-align:center;
}
.rightbottom
{
border-width:0px;
text-align:center;
}
</style>

</HEAD>
<BODY>
<CENTER>
<TABLE class=&quot;noborder&quot; border=&quot;1&quot; width=&quot;400&quot; height=&quot;400&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>
<TR>
<TD class=&quot;lefttop&quot;>
lefttop
</TD>
<TD class=&quot;midtop&quot;>
midtop
</TD><TD class=&quot;righttop&quot;>
righttop
</TD>
</TR>
<TR>
<TD class=&quot;leftmid&quot;>
leftmid
</TD>
<TD class=&quot;midmid&quot;>
midmid
</TD>
<TD class=&quot;rightmid&quot;>
rightmid
</TD>
</TR>
<TR>
<TD class=&quot;leftbottom&quot;>
leftbottom
</TD>
<TD class=&quot;midbottom&quot;>
midbottom
</TD>
<TD class=&quot;rightbottom&quot;>
rightbottom
</TD>
</TR>
</TABLE>

</BODY>
</HTML>

Hope this helps,
Erik

<-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->
 
Upvote 0 Downvote
Thanks, but it's not the whole of a cell I'm wanting to apply a border to.

I understand how css can apply different borders to different edges of tables/cells,

Putting a nested table's kind of worked in places and not others - it messes up the alignment of a sliced image I'm using in the background of some cells, but I think with some more playing around with sizes I might just get there...

Thanks
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
338
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
267
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
298
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
124
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top