Is there a way to access the edge (top, left, right, bottom) width css for a selectable table using jQuery UI selectable, or do I need to use JavaScript?
Update: By "accessing the edge," I mean creating a border around a selected area in a table (selecting td elements, first .ui-selected in tr, last .ui-selected in tr, first tr containing .ui-selected, last tr containing .ui-selected).
<table class="ui-selectable">
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
</tr>
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee"></td>
</tr>
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee ui-selected"></td>
<td class="ui-selectee"></td>
</tr>
<tr>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
<td class="ui-selectee"></td>
</tr>
</table>
For example, to style the left edge:
.ui-selected {
border-left: 1px solid #00F;
}
.ui-selected ~ .ui-selected {
border-left: none;
}