Non-image solution to drawing connectors in hierarchical structure

What I want to do is create a connector from the second tr to all the tr's below except for the last one. Here's my current image-based solution:

http://jsf开发者_StackOverflowiddle.net/DmcEB/13/

However, I don't want to rely on images. For example, using Unicode characters (unicode-search.net/unicode-namesearch.pl?term=bracket) instead.

Environment: Rails, HTML/CSS, Prototype

---

You could prepend each cell with a unicode box drawing element. I'm more of a jQuery person, but I think Prototype's insert or replace method could do this.

The only problem with this solution would be if your users need to select the text. But for most browsers, you can wrap the character with a span and use CSS to prevent selection of the unicode char.

Something like this: http://jsfiddle.net/DmcEB/18/

(Last element needs some fixing)

---

using :before and content:"" you can get a pure CSS solution. Provided the client can handle the unicode characters:

http://jsfiddle.net/ctrlfrk/DmcEB/19/

Here is a list of the box drawing unicode characters for reference: http://en.wikipedia.org/wiki/Box_drawing_characters