I need to add keyboard access for a cell-height-fixed HTML table. That is, if a scroll bar appears in the cell (example given), the keyboard needs to be able to scroll that cell using arrow keys. How can I achieve that? I need to support Internet Explorer 6, 7, and beyond.
Thanks a lot for the help in advance.
Table example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Simplified</title>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" BGCOLOR="#E8E8E8">
<tr align="center">
<td valign="top">
<strong>List</strong>
</td>
</tr>
<tr align="center">
<td>
<table width="100%" border="1" cellspacing="0" cellpadding="2" id="reasonList">
<tr>
<th scope="row" width="15%">
<span class="workArea">
<a href="http://www.somewhere.com/someHTML.html"><nobr>Entry Number</nobr></a>
</span>
</th>
<td width="20%" align="center">
<span class="workArea">
<nobr>ALL</nobr>
</span>
</td>
<td width="10%" align="center">
<span class="workArea">
<nobr>A</nobr>
</span>
</td>
<td width="10%">
<span class="workArea">
<nobr>B</nobr>
</span>
</td>
<td width="35%" align="left">
<div style="overflow:auto; width: 330px; height: 110px;">
<span class="workArea">
Returned Customer<br>
Refund Requested<br>
Change of Address<br>
Denied Delivery<br>
Expedited processing<br>
Data Entry Errors<br>
Not Ready for Delivery<br>
Other Notices<br>
Billing Error<br>
Shipping Error<br>
Rejected Delivery<br>
</span>
</div>
</td>
<td width="15%">
<span class="workArea">
<nobr>07/15/2012</nobr>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You should be able to give the cell focus by adding
tabindex="-1"to the cell in question.