borders

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

[joshie76]

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]

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

[jatar_k]

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]

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

[alexjc]

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]

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]

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.