Calling a CSS class in a <tr> ?

[Solarpitch]

Hey Guys,

 

I have the below code that will echo a table with a nice box around it. But if I change the code and call the class like

 

<tr class='table_style'>

 

It will not apply the stylesheet settings. ie . . no box around the row. Heres what I am trying..

 

echo "<table  width='700' border='0' cellpadding='0' cellspacing='0'>";

while($row = $result->fetch_assoc())
  {
				echo "
				  
                <tr class='table_style'>
                 
			  <td  width = 46 align='center' valign='middle'><img src=".$camera_image." style= border='1px' width='40' height='40' /></td>
                  <td width = 100 align='left'>". $row['header'] ."</td>
                  <td width = 50 align='left'>" . $row['make'] . "</td>
                  <td width = 50 align='left'>" . $row['county'] . "</td>
                  <td width = 40 align='left'>" . '€' . $row['price'] . "</td>
			  <td width = 40 align='left'><a href=\"view_ad.php?ad_id=". $row['ad_id'] ."\">View Ad</a></td>
			  
                </tr>

            ";
		  


		  }

 

So for each row in the database . . I will loop through and display in its own row with a border around it (Thats what I am trying to achieve)...

 

heres the style sheet snippet

 

.table_style

{

font-family:Arial; font-size:13px; color:#303030;

 

height:55px;

border-bottom-style:solid; border-bottom-color:#D9D9D9; border-bottom-width:1px;

border-top-style:solid; border-top-color:#D9D9D9; border-top-width:1px;

border-left-style:solid; border-left-color:#D9D9D9; border-left-width:1px;

border-right-style:solid; border-right-color:#D9D9D9; border-right-width:1px;

}

[Solarpitch]

Can anyone help with this. Basically that code just explains that...

 

I am trying to make a box around a <tr> but id wont work. Kinda the same way you would use <table frame=box>

[ToonMariner]

tr are not the same kind of element to td's they have no visual interpretation on a page and as such are simply place holders for elements - needed so the browser can calculate where groups of elements should be.

 

the solution is to give each td a top and bottom border and give the first td a left border and the last td a rigyht border.

 

many ways to accomplish this... go play and let us know which method you decide on.

[Solarpitch]

Perfect . . thanks ToonMariner . . good advice as always!

[Solarpitch]

Hey,

 

Well .  I played around a little with this. The best option is what you said "the solution is to give each td a top and bottom border and give the first td a left border and the last td a rigyht border."

 

The only problem I am left with is:

 

1. How do I put a 10px; space between the rows in the table? I tried padding and that but I must be doing something wrong.

 

2. I wanted the colour of the border around the tr to change on rollover which I can do fine . . but instead of just highlighting it as one unique border, it also highlights the vertical ones between td data.

[ToonMariner]

1. give each td a margin-bottom: 10px;

 

2. tr:hover td {border-color: #ff0f0f;}

[Solarpitch]

Hi,

 

That still doesnt seem to work

 

Below is an example of the layout I am looking for. Just wondering if a div would be better or something.

 

http://xs216.xs.to/xs216/07241/example_3.gif

 

 

[ToonMariner]

well....

 

I find that search results are often best displayed as an unordered list (after all they are simply a list of results).  The issue here is the text text text text bit.

 

that in itself does indeed appear to be tabular data and as such a table is the correct markup.

 

Do you have a link to a live page?

 

seeing it and the type of infomation you are displaying would help deciding what is teh best route to take.

[Solarpitch]

No not at the min,

 

Just running on local.

 

As it stands the only problem I am having is putting the gap between the table rows. I mean I could echo another tr just under each one but the gap is well to big. and padding doesnt seem to do the trick.

 

so in the above example, I have the layout . . but not the space/ gap in between each of the boxes.