Use keyboard to tab through or scroll fixed height HTML table cells

StackOverflow https://stackoverflow.com/questions/13879703

Question

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>
Was it helpful?

Solution

You should be able to give the cell focus by adding tabindex="-1" to the cell in question.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top