Add bottom border to entire Table Row with css

[yandoo]

Hi there,

 

I'm having a bit of trouble with adding a border to my table row (tr). I'm using css and i know it works fine for the TD ( if css is applied to each TD cell).

 

I think the trouble is with that i need the entire first row to share the same border. If i add the border to each of the columns (TD) then i end up with each column having its own separate border.

 

I use this code to enable the borders on TD to work:

class=\"new_border\"

 

The code for the border (which is black and goes on bottom only) is:

.new_border {
border-top-width: thin;
border-bottom-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #000000;
border-bottom-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bolder;
}

 

The table is basically records of my database and the entire top row are the Titles to each record which is why i want to get a border to go underneath them, to seperate titles and record results.

 

Please note: The titles of the records are TD....Not TH...is this where im going wrong???

 

Basically i would like the entire top row (titles of records) share one border that goes along the bottom only, so it separates the titles with record results.

 

Please help

 

How do i do this?

 

Thank You

[lococobra]

Shouldn't this be in the "CSS (Style Sheets) Help" forum?

 

Do it like this...

 

.new_border {
Stuff you want applied to the whole table
}
.new_border tr{
Stuff you want applied to the table's trs
}
.new_border td{
Stuff you want applied to the table's tds
}

[yandoo]

Hi and thanks for the help.

 

I made the changes as you suggested. I then changed the table code im using to:

 

echo "<tr class=\"new_border\">";  //need to make border accross this row

 

The new_border is the css i changed which is now:

 

.new_border {
border-top-width: thin;
border-bottom-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #000000;
border-bottom-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bolder;
}

.new_border tr{
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;

}

 

 

I have tried the css now using above example and just your addition:

 

.new_border tr{
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;

}

 

When i view in browser there no border at all??

 

what am i missing here??

 

Thank you

[yandoo]

Hi,

 

It only seems to work when applied the <table> bit of code Not either TR or TD.....

 

echo"<table width=\"700\" class=\"new_border\">";  Works

 

echo "<tr class=\"new_border\"> Doesn't Work

 

echo "<td width=\"80\" class=\"new_border\">";  Doesn't Work

 

 

Please help

[ToonMariner]

Afraid that the border only works on the td tag across browsers so you are stuck with that...

 

you can't apply it to the tr tag.

[yandoo]

Hi thanks for reply

 

Thats a bit of a shame with the TR.

 

Is there a way that i can somehow make it so the TD's with the titles in borders kind of merge so there is one long border across them instead of individual border lines per TD???????

 

Thanks

 

 

 

 

[ToonMariner]

yep

 

border-collapse: collapse

 

in your css for the table selector