I'd like to have a little handle on the right side of my tables that can be used for resizing the column. I've got some relatively clean CSS and markup that seems to do the trick (fiddle):
HTML:
<table>
<thead>
<tr>
<th>
<span class=resize> </span>
<div class=label>
Column 1
</div>
</th>
<th>
<span class=resize> </span>
<div class=label>
Column 2
</div>
</th>
</tr>
</thead>
</table>
CSS:
table thead th {
position: relative;
}
table thead th .resize {
width: 8px;
background-color: gray;
position: absolute;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 1;
cursor: col-resize;
}
This seems to work great in WebKit and IE 8, but fail miserably in Firefox.
How do I make this work in Firefox as well?