SitePoint Sponsor |
|
User Tag List
Results 1 to 17 of 17
Thread: Can <tr> borders be set in CSS?
-
May 9, 2005, 11:34 #1
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..
-
May 9, 2005, 12:09 #2
- 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>
-
May 9, 2005, 13:32 #3
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..
-
May 9, 2005, 13:39 #4
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..
-
May 9, 2005, 14:20 #5
- 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> 12345</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> 12345</td> </tr> <tr> <td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr> </table> </body> </html>
-
May 9, 2005, 14:22 #6
- 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).
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
-
May 9, 2005, 15:09 #7
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..
-
May 9, 2005, 15:43 #8
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..
-
May 9, 2005, 16:00 #9
- 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%"> </td> <td width="6%">12</td> <td width="4%"> </td> </tr> <tr> <td>WULF n BEAR</td> <td>Raptures of the Deep</td> <td>20:20 Vision</td> <td> </td> <td>12</td> <td> </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> </td> </tr> <tr> <td>SCAN X</td> <td>Higher + The Soul</td> <td>F Comm</td> <td> </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 & 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"</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> </td> <td>12</td> <td>00</td> </tr> <tr> <td>JOE MONTANA</td> <td>A New Day</td> <td>Deep Touch Records</td> <td> </td> <td>12</td> <td> </td> </tr> <tr> <td>ELECTRACOUSTIC</td> <td>Pacific Coast Highway</td> <td>Outer</td> <td>Kerri Chandler mix</td> <td>12</td> <td> </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>
-
May 9, 2005, 23:18 #10
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by KingOfMyCastle
Originally Posted by KingOfMyCastle
Originally Posted by KingOfMyCastle
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
-
May 10, 2005, 00:47 #11
- 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).Jon Gibbins - http://accessibility.co.uk/
-
May 10, 2005, 02:16 #12
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..
-
May 10, 2005, 08:27 #13
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Use a non-breaking space.
Code:<td> </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.
-
May 10, 2005, 08:37 #14
- 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; }
Jon Gibbins - http://accessibility.co.uk/
-
May 10, 2005, 08:45 #15
- 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.
-
May 10, 2005, 10:32 #16
- 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
-
May 11, 2005, 02:52 #17
Originally Posted by AutisticCuckoo
JK..
Bookmarks