Tree-like Connectors in Table (HTML/CSS/Prototype)

Here's my fiddle: http://jsfiddle.net/DmcEB开发者_如何学Go/54/

I'd like it to looks like this:

The code should be smart enough to know that it should only create connectors for the rows after the event pick and before the game date.

[Edit] code adjusted to allow for 'lastindent' within the table.

var lastCell,remember;
$$('.geniusPicks tr > td:first-child').slice(1,-1)
     .each(
       function(cell) {
         cell = $(cell);
         lastCell = (cell.innerHTML.match(/^@/)
                ? cell.addClassName('indent') 
                : void 0);
        if (remember &&
            remember.innerHTML.match(/^@/) && 
            !cell.innerHTML.match(/^@/)) {
           remember.addClassName('lastindent');
        }
       remember = cell;
});

See jsfiddle