Welcome to WebmasterWorld Guest from 54.162.136.26

Forum Moderators: not2easy

Message Too Old, No Replies

borders

using CSS to apply a border to table rows...

     
9:24 am on Aug 24, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 10, 2001
posts:793
votes: 0


Does anybody know of a way to apply a border to a whole table row without applying a class to every cell (with a different one to each end to 'close the box').

Tried allsorts but can't seem to crack it.

11:55 am on Aug 25, 2001 (gmt 0)

Administrator from US 

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 1999
posts:38070
votes: 16


Umm, would a table within the table work? Then apply the class to the inner table.
7:57 pm on Aug 25, 2001 (gmt 0)

Administrator

WebmasterWorld Administrator jatar_k is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:July 24, 2001
posts:15756
votes: 0


I don't use CSS (too many cross browser issues) but when i need to border specific rows I use, either, a nested table or cells with bgcolor that span the rows I want bordered. You have to be careful with too many nested tables because it can increase rendering time. I use them only if I need one or two rows bordered. Otherwise I use cells with a width, height and bgcolor you just have to put a spacer in the cell for netscape so that it doesn't collapse them if it thinks they are empty.
8:13 pm on Aug 25, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 25, 2000
posts:1786
votes: 0


I'm not 100% sure but I think this isn't even implemented in curent browsers.
12:41 am on Aug 26, 2001 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 27, 2000
posts:75
votes: 0


You will have to specify the class of the start and end cells, but the ones in the middle you can set a default for. You'll need content in each cell for the borders to format correctly in CSS1.

<style>
table.mytab td { border-width: 0 1px 0 0; ... } # default case
table.mytab td.s { border-width: 1px 0 0 0; ... } # start
table.mytab td.e { border-width: 0 0 1px 0; ... } # end
</style>

<table class=mytab>
<tr><td class=s>start</td> <td>middle</td> <td>repeat</td> <td class=e>end</td></tr>
</table>

You'll have to play around with the border widths... i can't remember the order they are specified with using 4 parameters.

Hope that helps.

Alex

11:31 am on Aug 30, 2001 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 10, 2001
posts:793
votes: 0


The problem with nested tables is that the table contains data and it's damn difficult to maintain the column sizes - end up with a very messy table. Does anybody know a good way around this.

The problem with defining the end cells is the messy javascript it makes - we actually only want the borders to appear on rollover ... but for the whole row. We can see ways to do it but it means writing a ton of javascript and lots of ~duplicate classes for cells everywhere. The tables are generated on the server by XSLT too which just adds complexity as we don't know how many rows there will be - have to check the data etc... Not worth that much hassle methinks.

Thanks for the help and suggestions though.

J

1:50 pm on Aug 31, 2001 (gmt 0)

Administrator from US 

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 21, 1999
posts:38070
votes: 16


Maintaining cell sizes can be a challenge. I usually hack out a nested table solution, or let the sizes just float where they may. If I absolutly need a set width, I'll use a graphic and specify the width and then save row of td's just for the graphic.

Also, don't forget "nowrap" on your td's.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members