Solved

how to add a horizontal line separator between rows in a table

Posted on 2004-08-20
2
1,047 Views
Last Modified: 2010-04-09
Hi,

I am currently using the following line to separate rows in a table:

<tr><td colspan="8" height="0"><hr></td></tr>

My problem is that this row takes up too much vertical space on the page.  In other words, even though I specify a height=0 for the row, the row still seems to take up as much vertical space as a row with text.  I don't want that.  I want the horizontal line to barely add any vertical space to the table, maybe just a little but not the same height as a row with data.  Is there any way to do this?

If anyone uses hotmail online, I like the way my email messages are separated by a horizontal line.  That is somewhat like what I am shooting for.

Thanks in advance,
Dave
0
Comment
Question by:david_m_jacobson
2 Comments
 
LVL 15

Accepted Solution

by:
Colosseo earned 125 total points
ID: 11857799
Hi Dave

I created a sample table to show you how you could perhaps do this

the style="border-bottom:1px solid #000000" adds a line to the bottom of the cells in the first row

1px is the width of the line in pixels
solid is the type of line... you might want to try dashed for example
#000000 is the colour

<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td style="border-bottom:1px solid #000000">row 1 col 1</td>
    <td style="border-bottom:1px solid #000000">row 1 col 2</td>
  </tr>
  <tr>
    <td>row 2 col 1</td>
    <td>row 2 col 2</td>
  </tr>
</table>

For your information to add a complete border you can use

style="bottom:1px solid #000000"

or for example a bottom and right border like this

style="border-right:1px solid #000000;border-bottom:1px solid #000000"

You can get more information about borderstyles at

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/borderstyle.asp

HTH

Scott
0
 

Author Comment

by:david_m_jacobson
ID: 11857877
Thanks.  I had to get rid of the cellpadding for it to look like a solid line and I changed the color to #CCCCCC.  I thought I had tried this earlier but I must have had a typo.  Thank you for the help!

Dave
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question