ダブルクリックしてSafariで空の領域/スペースを選択しないようにする方法は？

Question

Safariブラウザのテキスト選択が奇妙です。テキストだけでなく、ダブルクリックで空のスペースを選択することもできます。ここでは、次のとおりです。

選択した領域は、TDタグの何物でもありません！

私の場合はこの現象を防ぎ、テキストのみを選択するか、何もしないでください。 アイデア調査の多くの後

非常にシンプルJSFiddle：https://jsfiddle.net/vadimcpp/u38y5fsh/5/

HTML：

<table> 
    <tr> 
    <td class="my-cell"><div>Cell 1</div></td> 
    <td class="my-cell"><div>Cell 2</div></td> 
    <td class="my-cell"><div>Cell 3</div></td> 
    <td class="my-cell"><div>Cell 4</div></td> 
    </tr> 
</table> 

はCSS：

.my-cell { 
    border: 1px solid lightgray; 
    height: 75px; 
    vertical-align: text-top; 
    width: 100px; 
} 

Answer 1

このような何か？

.my-cell { 
 
    border: 1px solid lightgray; 
 
    height: 75px; 
 
    vertical-align: text-top; 
 
    width: 100px; 
 
    -webkit-user-select: none; 
 
    /* Chrome/Safari */ 
 
    -moz-user-select: none; 
 
    /* Firefox */ 
 
    -ms-user-select: none; 
 
    /* IE10+ */ 
 
} 
 

 
.selectable { 
 
    -webkit-user-select: text; 
 
    /* Chrome/Safari */ 
 
    -moz-user-select: text; 
 
    /* Firefox */ 
 
    -ms-user-select: text; 
 
    /* IE10+ */ 
 
}

<table> 
 
    <tr> 
 
    <td class="my-cell"> 
 
     <div class="selectable">Cell 1</div> 
 
    </td> 
 
    <td class="my-cell"> 
 
     <div class="selectable">Cell 2</div> 
 
    </td> 
 
    <td class="my-cell"> 
 
     <div class="selectable">Cell 3</div> 
 
    </td> 
 
    <td class="my-cell"> 
 
     <div class="selectable">Cell 4</div> 
 
    </td> 
 
    </tr> 
 
</table>