How to disable text selection in a table


When the user drags the mouse over the rows, the row text gets selected, looking a bit awkward. Check the image below:

In order to prevent the user from doing these selections and to keep the rows integrity, we can use the following options:

  • CSS Fix –  works with all browsers except IE
  • Controlling KeyEvents (onselectstart and ondragstart)- works with IE

Check the sample code below to see the implementation of both the approaches:

<html>
<head>
<style type=”text/css”>
.selecting {
-moz-user-select: -moz-none;
-webkit-user-select: none;
user-select: none;

}
</style>
</head>
<body>
<table id=”x” onselectstart=”return false” ondragstart=”return false”>
<tr><td>1</td><td>Indy</td></tr>
<tr><td>1</td><td>Amy</td></tr>
<tr><td>1</td><td>John</td></tr>
<tr><td>1</td><td>Luke</td></tr>
<tr><td>1</td><td>Steve</td></tr>
</table>
</body>
</html>

Well now the user mouse drags won’t work and the page will look neat.

2 thoughts on “How to disable text selection in a table

Feel free to leave a reply here...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s