<h1>scrollable region test</h1>

<div id="container-element" role="region" aria-label="Prices for lemons and pears in London - table with one level of row and column headers"  class="scrollable" tabindex="0">
    <table border="1">
			<caption>Prices for lemons and pears in London</caption>
			<thead>
				<tr>
					<td></td>
					<th>Lemons</th>
					<th>Pears</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>Wholesale</th>
					<td>£1.00</td>
					<td>£1.50</td>
				</tr>
				<tr>
					<th>Retail</th>
					<td>£2.00</td>
					<td>£2.50</td>
				</tr>
        <tr>
					<th>Wholesale</th>
					<td>£1.00</td>
					<td>£1.50</td>
				</tr>
				<tr>
					<th>Retail</th>
					<td>£2.00</td>
					<td>£2.50</td>
				</tr>
        <tr>
					<th>Wholesale</th>
					<td>£1.00</td>
					<td>£1.50</td>
				</tr>
				<tr>
					<th>Retail</th>
					<td>£2.00</td>
					<td>£2.50</td>
				</tr>
        <tr>
					<th>Wholesale</th>
					<td>£1.00</td>
					<td>£1.50</td>
				</tr>
				<tr>
					<th>Retail</th>
					<td>£2.00</td>
					<td>£2.50</td>
				</tr>
			</tbody>
			<tfoot>
			<tr>
					<th>Increase: wholesale versus retail</th>
					<td>£1.00</td>
					<td>£1.00</td>
				</tr>
				</tfoot>
		</table>
</div>

.scrollable
{
    height: 12.0em; /* or any height you’d like */
  overflow: auto;
  
  width: 25.0em; /* or any width you’d like */
    
}

.scrollable:focus
{
    outline: 2px solid blue; /* or other design variations that you might prefer */
}
h1 {padding-bottom: 1em}