Welcome to WebmasterWorld Guest from 54.196.175.173

Forum Moderators: not2easy

Message Too Old, No Replies

borders

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

     

joshie76

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

WebmasterWorld Senior Member 10+ Year Member



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.

Brett_Tabke

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

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



Umm, would a table within the table work? Then apply the class to the inner table.

jatar_k

7:57 pm on Aug 25, 2001 (gmt 0)

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



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.

toolman

8:13 pm on Aug 25, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm not 100% sure but I think this isn't even implemented in curent browsers.

alexjc

12:41 am on Aug 26, 2001 (gmt 0)

10+ Year Member



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

joshie76

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

WebmasterWorld Senior Member 10+ Year Member



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

Brett_Tabke

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

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



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month