html - Hand(Pointer) cursor extended over the whole th/td, how to place it only over text?(html)

Question

我有一个如下所示的 html 表格:

<table id="table-first">
<tr>
<th>Column A</td>
<th>Column B</td>
<th>Column C</td>
</tr>
<tr>
<td>Text A</td>
<td>Text B </td>
<td>Text C </td>
<tr>
</table>

并为其添加以下 CSS:

    table.table-first {clear: both; position: relative; width: 100%; table-layout:fixed;} 
table.table-first th { padding: 10px 5px; cursor:pointer;}

如您所见，存在一个“cursor:pointer”属性，当我们将鼠标悬停在任何标题栏上时，它会显示手形图标。但是，手形图标覆盖整个标题栏，而不仅仅是标题文本。我们如何才能将手(指针)光标限制在“th”文本上？

Answer 1

你可以尝试类似的东西

<span class="pointer">Column A</span> 

围绕每个列文本。然后设置

.pointer {cursor:pointer;}