asked on

why can't I get a border around <tr> elements?

Hi-

I can get table and td selectors to work, but not tr:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>
   THE TITLE
  </title>
  <style>
 tr /* <----------- table, td works but not tr */
   {
    border: 1px solid black;
   }
   td {
   	font-size: 26px;
   	color:red;
   }
  </style>
 </head>
 <body>
  <table class="property_list">
   <tr class="property_list_row">
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
   </tr>
   <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
   </tr>  </table>
 </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Jagadishwor Dulal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Scott Fell

td{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}
td:first-child{border-left:1px solid black;}
td:last-child{border-right:1px solid black;}

Open in new window

SAbboushi

ASKER

Thanks - can you help me understand why my code didn't work? I read about collapsing borders model, but still don't understand why it works for td but not tr...?

SAbboushi

ASKER

sorry padas- you must have posted while I was still reading jagadishdulal's response.

SAbboushi

ASKER

I should clarify: I'm looking to understand how css works; my objective is not really to find a workaround. I just don't understand why tr selector/border doesn't work

Gary

TR does not have a property of border because it has no dimensions, it is only design tag to say this is a row of td elements
Using the border-collapse hack makes it have dimensions equal to the td's hence the border works

SAbboushi

ASKER

Thanks GaryC123 - where would I refer to see that TR does not have a property of border and that TD and Table do?

I'm looking on w3schools at CSS border property and HTML td, tr and table tags, but I'm not seeing this information... table tag is the only one that has a border attribute, but that is for table CELLS... confusing to me...

Maybe you can respond to my new related question here

Gary

http://www.w3schools.com/tags/tag_tr.asp

You'll see all attributes have now been deprecated in HTML5

SAbboushi

ASKER

But that's also the case for table and td...

Scott Fell

This is the spec you probably want.

Tables are all good in html5, just not the inline attributes you saw in html4.

SAbboushi

ASKER

>> This is the spec you probably want.
huh?

>> Tables are all good in html5, just not the inline attributes you saw in html4.
I believe I was not using inline attributes...?
Sorry - feeling like such a noob!

Scott Fell

I thought you meant tables were depreciated in html5 and my response was simply that they are alive and well....just without the inline attributes. http://www.w3schools.com/tags/tag_table.asp

The point to your question though is there is no border around a tr. Instead you put the border around the td or the hack that was mentioned.

You can also make tables with div's http://coboldinosaur.com/pages/Tables-Part-2.html

SAbboushi

ASKER

k thanks

why can't I get a border around &lt;tr&gt; elements?

why can't I get a border around <tr> elements?