By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,738 Members | 1,080 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,738 IT Pros & Developers. It's quick & easy.

Simple CSS question?

P: n/a
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
Share this Question
Share on Google+
8 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.