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.

  1. Ola
    great share.
    I consider the great cccam servers are those from fishbone cloud
    I would like to see more posts like this
    Thanks

    Reply

  2. Outstanding. 5-star, pre-ZACTLY what I needed!!!

    Reply

  3. Thanks a lot. I was looking just this behaviour. It works perfect.

    Reply

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 )

Connecting to %s

%d bloggers like this: