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:

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

<table id=”x” onselectstart=”return false” ondragstart=”return false”>

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

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


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


Feel free to leave a reply here...

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

You are commenting using your 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

%d bloggers like this: