JSFiddle - React, Tailwind, and code Playground
by provegard
HTML
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<div id="multicol">
<table>
<tr>
<th>Col A</th>
<th>Col B</th>
</tr>
<tr ng-repeat="item in items">
<td>{{ item.first }}</td>
<td>{{ item.second }}</td>
</tr>
</table>
</div>
CSS
#multicol table {
border: 0;
border-collapse: collapse;
cursor: default;
}
#multicol tr td:first-child {
padding-left: 5px;
}
#multicol td {
padding: 3px 5px 3px 20px;
}
.hover {
background-color: #87cefa;
}
.selected {
background-color: navy !important;
color: white;
}
CoffeeScript
$('#multicol table tr:has(td)').hover ->
$(this).addClass("hover")
, ->
$(this).removeClass("hover")
.click ->
$(this).toggleClass("selected")
@TableCtrl = ($scope) ->
#