CODEWITHSUNDEEP
htmlcss
Nehal Jain
Nehal Jain

Reputation: 105

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

I have an html table like below:

<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>

and have the following CSS for it:

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

As you can see there is a 'cursor:pointer' attribute present which brings the hand icon as we hover over any header column. However, the hand icon ranges over the whole header column and not just over the text of the header. How can we limit the hand (pointer) cursor only over the 'th' text?

Upvotes: 3

Views: 1658

Answers (1)

Emilio Miralles
Emilio Miralles

Reputation: 129

You could try something like 

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

around each of the column text. And then set 

.pointer {cursor:pointer;}

Upvotes: 6

Related Questions