468,241 Members | 1,514 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,241 developers. It's quick & easy.

Simple CSS question?

I have a table with 61 rows and 4 columns. Names, email, phone,
affiliation.

I want to have a solid 1px bottom border for each row. But I am not
smart enough with CSS to figure out how to do this without giving a
class to each TD (there are 244 of them) And I want there to be about
8px of margin underneath that border, or before the next person's name.

How could I do this? I just want a bottom border. I've tried giving the
<tr> a class that has a border-bottom assigned to it, but haven't been
able to make it work.

Thanks!
Steve
Jul 20 '05 #1
8 3976
Els


Steve K wrote:
I have a table with 61 rows and 4 columns. Names, email, phone,
affiliation.

I want to have a solid 1px bottom border for each row. But I am not
smart enough with CSS to figure out how to do this without giving a
class to each TD (there are 244 of them) And I want there to be about
8px of margin underneath that border, or before the next person's name.

How could I do this? I just want a bottom border. I've tried giving the
<tr> a class that has a border-bottom assigned to it, but haven't been
able to make it work.


table td {
border-bottom:1px solid black;
margin-bottom:8px;
}


--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #2
Quoth the raven named Steve K:
I have a table with 61 rows and 4 columns. Names, email, phone,
affiliation.

I want to have a solid 1px bottom border for each row. But I am not
smart enough with CSS to figure out how to do this without giving a
class to each TD (there are 244 of them) And I want there to be about
8px of margin underneath that border, or before the next person's name.

How could I do this? I just want a bottom border. I've tried giving the
<tr> a class that has a border-bottom assigned to it, but haven't been
able to make it work.


This seems to fill your bill. No classes needed on table cells.

td { border-bottom: 1px solid #000; padding-top: 8px;}

--
-bts
-This space intentionally left blank.
Jul 20 '05 #3
Steve K wrote:
I have a table with 61 rows and 4 columns. Names, email, phone,
affiliation.

I want to have a solid 1px bottom border for each row. But I am not
smart enough with CSS to figure out how to do this without giving a
class to each TD (there are 244 of them) And I want there to be about
8px of margin underneath that border, or before the next person's
name.

How could I do this? I just want a bottom border. I've tried giving
the <tr> a class that has a border-bottom assigned to it, but haven't
been able to make it work.


If you want all the cells to have the same style, you *don't* need to give a
class to each! Suppose you give a class to the table:

<table class="someclass">

Now you can give properties to all the cells, for example:

table.someclass td { border-bottom: 1px solid red; }

This is a "decendent" or "contextual" selector, and it applies to all <td>s
found within the context of a table with the "someclass" class. It will
automatically apply to all 244 of them.

There are various ways of making space. For example, you may try:

table.someclass td { padding-bottom: 8px; }

This sort of selector is mind-blowingly powerful. Experiment, and find how to
achieve far-reaching effects with minimum impact on the HTML.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #4
Els


Els wrote:
table td {
border-bottom:1px solid black;
margin-bottom:8px;
}


Sorry, wrong answer, stick to Beauregard's reply :-)
(been into divs too much lately, td's don't have margins...)
--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Jul 20 '05 #5
Quoth the raven named Els:
table td {
border-bottom:1px solid black;
margin-bottom:8px;
}


Hmm, the margin-bottom doesn't work on my test page, using Firebird.
'Twas why I suggested the padding-top.

--
-bts
-This space intentionally left blank.
Jul 20 '05 #6
Quoth the raven named Els:
Els wrote:
table td {
border-bottom:1px solid black;
margin-bottom:8px;
}


Sorry, wrong answer, stick to Beauregard's reply :-)
(been into divs too much lately, td's don't have margins...)


<lol> Barry's answer gives a lot more [and I was thinking about
adding that info, but I didn't want to confuse the OP].

Steve, play with Barry's stuff.

--
-bts
-This space intentionally left blank.
Jul 20 '05 #7
In article <hD***************@newsfep3-gui.server.ntli.net>, "Barry
Pearson" <ne**@childsupportanalysis.co.uk> wrote:

Thanks, you folks are great! and very fast..

Steve K wrote:
I have a table with 61 rows and 4 columns. Names, email, phone,
affiliation.

I want to have a solid 1px bottom border for each row. But I am not
smart enough with CSS to figure out how to do this without giving a
class to each TD (there are 244 of them) And I want there to be about
8px of margin underneath that border, or before the next person's
name.

How could I do this? I just want a bottom border. I've tried giving
the <tr> a class that has a border-bottom assigned to it, but haven't
been able to make it work.


If you want all the cells to have the same style, you *don't* need to
give a
class to each! Suppose you give a class to the table:

<table class="someclass">

Now you can give properties to all the cells, for example:

table.someclass td { border-bottom: 1px solid red; }

This is a "decendent" or "contextual" selector, and it applies to all
<td>s
found within the context of a table with the "someclass" class. It will
automatically apply to all 244 of them.

There are various ways of making space. For example, you may try:

table.someclass td { padding-bottom: 8px; }

This sort of selector is mind-blowingly powerful. Experiment, and find
how to
achieve far-reaching effects with minimum impact on the HTML.

Jul 20 '05 #8
It seems "Steve K" wrote in
comp.infosystems.www.authoring.stylesheets:
I want to have a solid 1px bottom border for each row. But I am not
smart enough with CSS to figure out how to do this without giving a
class to each TD (there are 244 of them)


Give a class (or ID) to the table, and then write your css as

table#contacts td { border-bottom:... }

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/
Jul 20 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Patchwork | last post: by
1 post views Thread by Proteus | last post: by
2 posts views Thread by Raskolnikow | last post: by
3 posts views Thread by Peter | last post: by
7 posts views Thread by abcd | last post: by
14 posts views Thread by Giancarlo Berenz | last post: by
30 posts views Thread by galiorenye | last post: by
10 posts views Thread by Phillip Taylor | last post: by
17 posts views Thread by Chris M. Thomasson | last post: by
reply views Thread by kermitthefrogpy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.