css cursor types testing

HTML

<table class="table table-striped standard-table">
<thead>
<tr>
<th scope="col">Category</th>
<th scope="col">Keyword</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr style="cursor: auto;">
<th rowspan="3" scope="row">General</th>
<td><code>auto</code></td>
<td>The UA will determine the cursor to display based on the current context. E.g., equivalent to <code>text</code> when hovering text.</td>
</tr>
<tr style="cursor: default;">
<td><code>default</code></td>
<td>The platform-dependent default cursor. Typically an arrow.</td>
</tr>
<tr style="cursor: none;">
<td><code>none</code></td>
<td>No cursor is rendered.</td>
</tr>
<tr style="cursor: context-menu;">
<th style="cursor: auto;" rowspan="5" scope="row">Links &amp; status</th>
<td><code>context-menu</code></td>
<td>A context menu is available.</td>
</tr>
<tr style="cursor: help;">
<td><code>help</code></td>
<td>Help information is available.</td>
</tr>
<tr style="cursor: pointer;">
<td><code>pointer</code></td>
<td>The cursor is a pointer that indicates a link. Typically an image of a pointing hand.</td>
</tr>
<tr style="cursor: progress;">
<td><code>progress</code></td>
<td>The program is busy in the background, but the user can still interact with the interface (in contrast to <code>wait</code>).</td>
</tr>
<tr style="cursor: wait;">
<td><code>wait</code></td>
<td>The program is busy, and the user can't interact with the interface (in contrast to <code>progress</code>). Sometimes an image of an hourglass or a watch.</td>
</tr>
<tr style="cursor: cell;">
<th style="cursor: auto;" rowspan="4" scope="row">Selection</th>
<td><code>cell</code></td>
<td>The table cell or set of cells can be selected.</td>
</tr>
<tr style="cursor: crosshair;">
<td><code>crosshair</code></td>
<td>Cross cursor, often used to indicate selection in a bitmap.</td>
</tr>
<tr style="cursor: text;">
<td><code>text</code></td>
<td>The text can be selected. Typically the shape of an I-beam.</td>
</tr>
<tr style="cursor: vertical-text;">
<td><code>vertical-text</code></td>
<td>The vertical text can be selected. Typically the shape of a sideways I-beam.</td>
</tr>
<tr style="cursor: alias;">
<th style="cursor: auto;" rowspan="7" scope="row">Drag &amp; drop</th>
<td><code>alias</code></td>
<td>An alias or shortcut is to be created.</td>
</tr>
<tr style="cursor: copy;">
<td><code>copy</code></td>
<td>Something is to be copied.</td>
</tr>
<tr style="cursor: move;">
<td><code>move</code></td>
<td>Something is to be moved.</td>
</tr>
<tr style="cursor: no-drop;">
<td><code>no-drop</code></td>
<td>An item may not be dropped at the current location.<br />[Firefox bug 275173](https://bugzil.la/275173): On Windows and macOS, <code>no-drop</code> is the same as <code>not-allowed</code>.</td>
</tr>
<tr style="cursor: not-allowed;">
<td><code>not-allowed</code></td>
<td>The requested action will not be carried out.</td>
</tr>
<tr style="cursor: grab;">
<td><code>grab</code></td>
<td>Something can be grabbed (dragged to be moved).</td>
</tr>
<tr style="cursor: grabbing;">
<td><code>grabbing</code></td>
<td>Something is being grabbed (dragged to be moved).</td>
</tr>
<tr style="cursor: all-scroll;">
<th style="cursor: auto;" rowspan="15" scope="row">Resizing &amp; scrolling</th>
<td><code>all-scroll</code></td>
<td>Something can be scrolled in any direction (panned).<br />[Firefox bug 275174](https://bugzil.la/275174): On Windows, <code>all-scroll</code> is the same as <code>move</code>.</td>
</tr>
<tr style="cursor: col-resize;">
<td><code>col-resize</code></td>
<td>The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.</td>
</tr>
<tr style="cursor: row-resize;">
<td><code>row-resize</code></td>
<td>The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.</td>
</tr>
<tr style="cursor: n-resize;">
<td><code>n-resize</code></td>
<td style="cursor: auto;" rowspan="8">Some edge is to be moved. For example, the <code>se-resize</code> cursor is used when the movement starts from the <em>south-east</em> corner of the box.<br />In some environments, an equivalent bidirectional resize cursor is shown. For example, <code>n-resize</code> and <code>s-resize</code> are the same as <code>ns-resize</code>.</td>
</tr>
<tr style="cursor: e-resize;">
<td><code>e-resize</code></td>
</tr>
<tr style="cursor: s-resize;">
<td><code>s-resize</code></td>
</tr>
<tr style="cursor: w-resize;">
<td><code>w-resize</code></td>
</tr>
<tr style="cursor: ne-resize;">
<td><code>ne-resize</code></td>
</tr>
<tr style="cursor: nw-resize;">
<td><code>nw-resize</code></td>
</tr>
<tr style="cursor: se-resize;">
<td><code>se-resize</code></td>
</tr>
<tr style="cursor: sw-resize;">
<td><code>sw-resize</code></td>
</tr>
<tr style="cursor: ew-resize;">
<td><code>ew-resize</code></td>
<td style="cursor: auto;" rowspan="4">Bidirectional resize cursor.</td>
</tr>
<tr style="cursor: ns-resize;">
<td><code>ns-resize</code></td>
</tr>
<tr style="cursor: nesw-resize;">
<td><code>nesw-resize</code></td>
</tr>
<tr style="cursor: nwse-resize;">
<td><code>nwse-resize</code></td>
</tr>
<tr style="cursor: zoom-in;">
<th style="cursor: auto;" rowspan="2" scope="row">Zooming</th>
<td><code>zoom-in</code></td>
<td style="cursor: auto;" rowspan="2">
<p>Something can be zoomed (magnified) in or out.</p>
</td>
</tr>
<tr style="cursor: zoom-out;">
<td><code>zoom-out</code></td>
</tr>
</tbody>
</table>