JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

<div class="geniusPicks">
    
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th>Pick</th>
            <th>Genius</th>
            <th>Genius Credential</th>
            <th>Result</th>
        </tr>
        <tr>
            <td>The New York Yankees will beat the Boston Red Sox.</td>
            <td></td>
            <td></td>
            <td>Starts Sat 7:45 PM EST</td>
        </tr>
        <tr>
            <td>@ -105 price</td>
            <td>jbloe</td>
            <td>MLB East (BetIQ: 15.0)</td>
            <td>--</td>
        </tr>
        <tr>
            <td>@ -106 price</td>
            <td>fdukes</td>
            <td>MLB Overall (BetIQ: 7.0)</td>
            <td>--</td>
        </tr>
        <tr>
            <td>@ -105 price</td>
            <td>bhoe</td>
            <td>MLB East (BetIQ: 6.0)</td>
            <td>--</td>
        </tr>
        <tr>
            <td>
                <span class="floatLeft">Game on Dec 4</span>
                <span class="floatRight"></span>
            </td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        
        <tr>
            <td>The Boston Red Sox will beat the New York Yankees.</td>
            <td></td>
            <td></td>
            <td>Starts Sat 7:45 PM EST</td>
        </tr>
        <tr>
            <td>@ -105 price</td>
            <td>jbloe</td>
            <td>MLB East (BetIQ: 15.0)</td>
            <td>--</td>
        </tr>
        <tr>
            <td>@ -106 price</td>
            <td>fdukes</td>
            <td>MLB Overall (BetIQ: 7.0)</td>
            <td>--</td>
        </tr>
        <tr>
            <td>@ -105 price</td>
            <td>bhoe</td>
            <td>MLB East (BetIQ: 6.0)</td>
            <td>--</td>
        </tr>
        <tr>
            <td>
                <span class="floatLeft">Game on Dec 4</span>
                <span class="floatRight"></span>
            </td>
            <td></td>
            <td></td>
           ...

CSS

.geniusPicks {}
.geniusPicks table {width:100%;}
.geniusPicks table th, tr, td {border:1px dotted;}

.floatLeft {float:left;}
.floatRight {float:right;}

.indent {
    text-indent:20px;
    background-image:url('http://www.treemenu.net/treeviewfiles/ftv2node.gif'); 
    background-repeat:no-repeat;
}

.lastindent {
    background-image:url('http://www.treemenu.net/treeviewfiles/ftv2lastnode.gif'); 
}

JavaScript

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;
});

lastCell.addClassName('lastindent');