JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container">
    <div class="hero-unit">
        <h1>ZyLAB Preservation Manager</h1>
        <p>Manage the life cycle of legal holds.</p>
    </div>
</div>

<div class='container'>
    <div class='row'>
        <div class='span10 tabbable tabs-left'>
            <ul class='nav nav-tabs span2'>
                <li class='active'><a href='#legal-holds' data-toggle='tab'>Legal holds</a></li>
                <li><a href='#custodians' data-toggle='tab'>Custodians</a></li>
            </ul>
            <div class='tab-content'>
                <table class='tab-pane active table table-striped table-bordered table-hover' id='legal-holds'>
                    <thead>
                    <tr>
                        <th class='span1'>Name</th>
                        <th class='span1'>Status</th>
                        <th class='span3'>Custodians</th>
                        <th class='span1'>Start date</th>
                        <th class='span1'>End date</th>
                        <th class='span1'></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>HR1257</td>
                        <td>Preservation</td>
                        <td>Frank, Glenn, Bruce</td>
                        <td>01/01/2012</td>
                        <td>12/31/2012</td>
                        <td><i class='icon-edit' data-toggle="modal" data-target='#hold-preservation'></i></td>
                    </tr>
                    <tr>
                        <td>HR2964</td>
                        <td>Litigation</td>
                        <td>Frank, Bruce</td>
                        <td>01/01/2012</td>
                        <td>12/31/2012</td>
                    </tr>
                    <tr>
     ...

CSS

#legal-holds > tbody > tr.selected > td:first-child:before, #custodians > tbody > tr.selected > td:first-child:before {
    content: '\2713'; # checkmark
}
#legal-holds > tbody > tr:not(.selected) > td:first-child:before, #custodians > tbody > tr:not(.selected) > td:first-child:before {
    content: '\2002\2004'; # em space and narrow space
}
atbody > tr.selected td {
    border: 1px dotted;
}

JavaScript

$('tr').on('click', function(e) {
    $(e.delegateTarget)
            .toggleClass('selected')
            .siblings().removeClass('selected');
});