SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can <tr> borders be set in CSS?

    Hi! I've been trying to get a table (of tabular data) to have a line after each row. My HTML has all the correct <tr> </tr> tags. And I've included this CSS:

    .musicforsale tr {border-top: 1px solid #000000;}
    (The table has a class of "musicforsale")

    Now if I add color: #FFFFFF; to this CSS the data in the row will be white so my 'tr' CSS is being picked up by the table. Unfortunately it never displays the 'border-top' that I'm looking for, there are no horizontal lines at all (in IE + Firefox). So is it possible to have table-wide horizontal lines on a table styled with CSS?

    As an aside, if I apply the 'border-top' tag to the 'td' instead I get a short line under each cell. (But not empty cells in IE).

    Can anybody help?

    John King..

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    styled borders for tables are no problem,

    first example set cellspacing to 0 <table cellspacing="5" id="prices"> and see what happens, if you want lots of colors

    second example is a table on a background color with cellspacing="1" for the borders

    Code:
    <!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>12345 12345 12345 12345 12345 </title>
    	<style type="text/css">
    	body{
    	background:#f5deb3;
    	}
    	.divtba,.divtbb{
    	position:absolute;
    	top:10px;
    	left:10px;
    	}
    	.divtbb{
    	left:300px;
    	}
    	table{
    	background-color:#ffffcc;
    	}
    	td,th{
    	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    	color:#808000;
    	font-size:10px;
    	font-style: italic;
    	padding: 5px;
    	text-align: left;
    	vertical-align:bottom;
    	border-color: #39c;
    	border-width: 1px 1px 0 0;
    	border-style: solid; 
    	}
    	.hia{height:20px;}
    	.hib{height:30px;}
    	.hic{height:40px;}
    	
    	th{
    	font-size:12px;
    	color:#000000;
    	font-weight:900;
    	}
    	.cb,.cc,.cd{
    	border-width: 1px 1px 1px 0;
    	}
    	.h,.a,.b{
    	border-width: 1px 1px 0 1px;
    	}
    	.c{
    	border-width: 1px 1px 1px 1px;
    	}
    	.ac{
    	border-color: #ff0000 #ff0000;
    	}
    	.bc{
    	border-color: #ff0000 #09c;
    	}
    	.ab{
    	border-color: #09c #ff0000;
    	}
    	.b,.cd,.hc{
    	background-color: #f4a460;
    	color: #ffffff;
    	} /* */
    	table#pricesx{
    	background-color:#39c;
    	
    	}
    	#pricesx td, #pricesx th{
    	color:#000000;
    	border-width: 0 0 0 0;
    	background-color:#ffffcc;
    	}
    	#pricesx th{
    	color:#000000;
    	}
    </style>
    </head>
    <body>
    <div class="divtba">
    <table cellspacing="0" id="prices">
    <tr>
    <th class="h">12345</th>
    <th class="hb">12345</th>
    <th class="hc">12345</th>
    <th class="hd">12345</th>
    </tr>
    <tr >
    <td class="a hia">12345</td>
    <td class="ab">12345</td>
    <td class="ac">12345</td>
    <td class="ad">12345</td>
    </tr>
    <tr>
    <td class="b hib">12345</td>
    <td class="bb">12345</td>
    <td class="bc">12345</td>
    <td class="bd">12345</td>
    </tr>
    <tr>
    <td class="c hic">12345</td>
    <td class="cb">12345</td>
    <td class="cc">12345</td>
    <td class="cd">12345</td>
    </tr>
    </table>
    </div>
    <div class="divtbb">
    <table cellspacing="1" id="pricesx">
    <tr>
    <th>12345</th>
    <th>12345</th>
    <th>12345</th>
    <th>12345</th>
    </tr>
    <tr>
    <td class="hia">12345</td>
    <td>12345</td>
    <td>12345</td>
    <td>12345</td>
    </tr>
    <tr>
    <td class="hib">12345</td>
    <td>12345</td>
    <td>12345</td>
    <td>12345</td>
    </tr>
    <tr>
    <td class="hic">12345</td>
    <td>12345</td>
    <td>12345</td>
    <td>12345</td>
    </tr>
    </table>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi! Thanks for the reply. Looking at your code, example 2 looks to be more the approach I'll take as I can't give each <td> a class as it'll be too time consuming. Thanks.

    Also lots of the my cells do not have any data at all. If you remove the '12345' from one of those cells on the first example you'll notice that in IE some of the border disappears. I think that was part of my earlier problem.

    As I only want to show horizontal borders, not vertical, I'll play around with the examples for a while.

    JK..

  4. #4
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And it seems weird how removing all the <tr> info from this bit of css doesn't make any difference to the table:

    .musicforsale {
    font: 0.75em Verdana, Geneva, Arial, helvetica, sans-serif;
    border-width: 2px 20px 2px 2px;
    background-color:#39c
    }

    .musicforsale tr {
    color: #FFFFFF;
    border-width: 10px 10px 10px 10px;
    border-top: 50px solid #000000;
    }

    .musicforsale td {
    color: #000000;
    border-width: 20px 20px 20px 20px;
    background-color: #FFFFCC;
    }

    Its as the <tr> doesn't work and I cant seem to get 10 or 20px borders at all.

    I'm using this in the HTML:

    <table summary="List of Records For Sale" class="musicforsale">
    <tr>
    .....
    .....
    </tr>
    </table>

    Is that right?

    JK..

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    yes a td needs something in it, i am not shure what your target is ?

    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	.musicforsale td{
    	font: 0.75em Verdana, Geneva, Arial, helvetica, sans-serif;
    	width:120px;
    	padding: 30px 2px 5px 10px;
    	background-color: #FFFFCC;
    	border-style: solid;
    	border-color: #39c;
    	border-width: 0px 0px 60px 0px;
    	}
    	table{
    	border-style: solid;
    	border-color: #39c;
    	border-width: 60px 20px 0px 20px; 
    	
    	}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    <body>
    <table summary="List of Records For Sale" class="musicforsale" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td>&nbsp;12345</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;12345</td>
    </tr>
    <tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    According to the CSS specification, the following applies for border-collapse:separate:
    Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).
    You must set your border properties on the TABLE, TD and/or TH elements, not on the TR, with the separate border model (which is the default, unless stated otherwise).

    For border-collapse:collapse, however:
    In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay Tommy, setting "border-collapse" to "collapse" has given me back control of some of the table. I can now get horizontal row lines using just this:

    .musicforsale {
    font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
    border-collapse: collapse;
    }

    .musicforsale tr {
    border-top: 1px solid #000000;
    }

    .musicforsale td {
    color: #000000;
    background-color: #BBFFFF;
    }

    But wait! Just checked in IE and its not working, there's no lines at all. Firefox is fine.

    Also I couldn't seem to have any effect on borders using the border-width or border-color commands. Only the border-top. This is getting weird.

    Can you give me any more help?

    JK..

  8. #8
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've just FTP'd the html and css:

    http://www.KingOfMyCastle.freeserve....t4/music4.html

    http://www.KingOfMyCastle.freeserve....st4/style4.css


    .musicforsale {
    font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
    border-collapse: collapse;
    border: 10px solid red;
    }

    .musicforsale tr {
    border-top: 10px solid #000000;
    border-style: solid;
    border: 10px solid blue;
    }

    .musicforsale td {
    color: #000000;
    background-color: #BBFFFF;
    }


    As you can see Firefox handles it totally differently than IE. It's as if the <tr> data doesn't work on IE. How do I get some uniformity accross both browsers?

    Thanks.

    JK..

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KingOfMyCastle
    .musicforsale {
    font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
    border-collapse: collapse;
    border: 10px solid red;
    }
    The table's border will be disappear under the row borders in the collapsing border model. You know that, right?

    Quote Originally Posted by KingOfMyCastle
    .musicforsale tr {
    border-top: 10px solid #000000;
    border-style: solid;
    border: 10px solid blue;
    }
    The first two rules are unnecessary here. The second rule will add a 0px solid border with the default foreground colour (i.e. nothing visible). The third rule overwrites both of the preceding ones.

    Quote Originally Posted by KingOfMyCastle
    As you can see Firefox handles it totally differently than IE. It's as if the <tr> data doesn't work on IE. How do I get some uniformity accross both browsers?
    Oh my god! There's a bug in IE?!
    It seems as if IE doesn't handle this.

    I think the easiest way to get decent cross-browser behaviour would be something like this:
    Code:
    .musicforsale {
      border-collapse:collapse;
      border:0 solid blue;
      border-width:10px 10px 0;
    }
    
    .musicforsale td {
      border-bottom:10px solid blue;
    }
    Birnam wood is come to Dunsinane

  10. #10
    SitePoint Member
    Join Date
    Jul 2004
    Location
    York, UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thought this was worth mentioning...

    I was trying to do something similar recently and used some scripting to make whole table rows highlight (switching CSS classes) and become "clickable" (yes, it degraded nicely ).

    The effect required a top and bottom border for each row. The only way I could get it to work cross-browser was to set the table properties in the HTML. I'm hoping increasing CSS support will make life simpler, but this is the only way I could get the effect I needed. However, in this particular situation, Tommy's solution way well work (after all, he knows what he's talking about).

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    one more try

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    			"http:///www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>KingOfMyCastle</title>
    <meta http-equiv="content-type"
    			content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html, body {
    	margin: 0;
    	padding: 0;
    	color: #000000;
    	font-size: 1em;
    	font: 1em helvetica, Geneva, Verdana, Arial, sans-serif;
    }
    
    #content {
    	margin-top: 8px;
      margin-left: 199px;
     	margin-right: 11em;
    	border: 1px solid #000000;
    	background-color: #DDFFFF;
    	padding: 5px 15px 10px 15px;
    } 
      
    /*.musicforsale {
    	font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
    	border-collapse: collapse;
    	border: 10px solid red;
    }
    
    .musicforsale tr {
    	border-top: 10px solid #000000;
    	border-style: solid;
    	border: 10px solid blue;
    }
    
    .musicforsale td {
    	color: #000000;
    	background-color: #BBFFFF;
    } */
    	.musicforsale td{
    	font: 0.75em Verdana, Geneva, Arial, helvetica, sans-serif;
    	width:120px;
    	padding: 30px 2px 5px 10px;
    	background-color: #FFFFCC;
    	border-style: solid;
    	border-color: #39c;
    	border-width: 0px 0px 40px 0px;
    	}
    	table{
    	border-style: solid;
    	border-color: #ff0000;
    	border-width: 20px 20px 20px 20px; 
    	
    	}
    	</style>
    </head>
    <body>
    <div id="content">
    
    <table summary="List of Records For Sale" class="musicforsale" border="0" cellpadding="0" cellspacing="0">
     <tr>
      <td width="25%">TOKYO OFFSHORE PROJECT</td>
      <td width="23%">Hyperambient</td>
      <td width="20%">Balance Prescription</td>
      <td width="22%">&nbsp;</td>
      <td width="6%">12</td>
      <td width="4%">&nbsp;</td>
     </tr>
     <tr>
      <td>WULF n BEAR</td>
      <td>Raptures of the Deep</td>
      <td>20:20 Vision</td>
      <td>&nbsp;</td>
      <td>12</td>
     <td>&nbsp;</td>
     </tr>
     <tr>
      <td>CHUGGER</td>
      <td>Thank You - Chuggles Revenge</td>
      <td>Back To Basic</td>
      <td>Prescription track</td>
      <td>12</td>
       <td>&nbsp;</td>
     </tr>
     <tr>
      <td>SCAN X</td>
      <td>Higher + The Soul</td>
      <td>F Comm</td>
       <td>&nbsp;</td>
      <td>12</td>
      <td>02</td>
     </tr>
     <tr>
      <td>D'PAC</td>
      <td>Took Me 4 Granted</td>
      <td>Crash Records</td>
      <td>inc. Dino &amp; Terry mix</td>
      <td>12</td>
      <td>97</td>
     </tr>
     <tr>
      <td>RED SNAPPER</td>
      <td>Snapper EP</td>
      <td>Flaw Records</td>
      <td>Very rare early 12&quot;</td>
      <td>12</td>
      <td>94</td>
     </tr>
     <tr>
      <td>BUSHWACKA!</td>
      <td>Boomtang EP</td>
      <td>Plink Plonk</td>
      <td>Matthew Bushwacka B</td>
      <td>12</td>
      <td>95</td>
     </tr>
     <tr>
      <td>SCANTY SANDWICH</td>
      <td>Day and Night</td>
      <td>Southern Fried</td>
       <td>&nbsp;</td>
      <td>12</td>
      <td>00</td>
     </tr>
     <tr>
      <td>JOE MONTANA</td>
      <td>A New Day</td>
      <td>Deep Touch Records</td>
       <td>&nbsp;</td>
      <td>12</td>
       <td>&nbsp;</td>
     </tr>
     <tr>
      <td>ELECTRACOUSTIC</td>
      <td>Pacific Coast Highway</td>
      <td>Outer</td>
      <td>Kerri Chandler mix</td>
      <td>12</td>
       <td>&nbsp;</td>
     </tr>
     <tr>
      <td>STAKKER</td>
      <td>Stakker Humanoid</td>
      <td>Westside Records</td>
      <td>FSOL</td>
      <td>12</td>
      <td>88</td>
     </tr>
    
    </table>
    </div>
    
    </body>
    </html>

  12. #12
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replys.

    All4Nerds:
    I had a go with your example and it worked okay. But there's a definite problem with empty cells. I suppose I could do a replace on the <TD><TD> strings to fill them up. I was also getting vertical lines on the table which is something I was trying to avoid. Thanks for the input though.

    Tommy:
    Thanks. I'm still trying to get my head around collapsing tables and no, I wouldn't have automatically assumed that table borders would dissappear under the row's borders. I'm starting to understand it a bit more now though.

    Thanks for the cross-browser answer, it works a treat. I still find it hard to believe that IE can't handle - .

    musicforsale tr {
    border-bottom:10px solid blue;
    }

    but will handle it if its a 'td'. But I can see now that with collapsable borders you CAN just border the bottom of each cell to achieve the effect (I am right, aren't I? )

    Anyway, you've found the solution to my problem and I really appreciate it. Thank you very much.

    John King..

  13. #13
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a non-breaking space.
    Code:
    <td>&nbsp;</td>
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  14. #14
    SitePoint Member
    Join Date
    Jul 2004
    Location
    York, UK
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you not use the following in the CSS?

    Code:
    td{
    empty-cells: show;
    }

  15. #15
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  16. #16
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Note that 'empty-cells' is only meaningful in the separate border model. In the collapsing border model, empty cells are always shown, unless memory fails me at this advanced age.

    So, didn't my example work for you then?
    Birnam wood is come to Dunsinane

  17. #17
    SitePoint Enthusiast KingOfMyCastle's Avatar
    Join Date
    May 2005
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    So, didn't my example work for you then?
    Yes, it worked fine. Thank you very much.

    JK..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •