双击表格：不要选择其他单元格答案

【问题标题】：Double clicking in tables: Don't select the other cells双击表格：不要选择其他单元格
【发布时间】：2013-05-26 16:41:55
【问题描述】：

当我双击一个单元格时，它会选择该单元格的内容（很好），但也会选择它右侧的单元格。

我的 TD 是浮动的：

#addresstable td{
    float: left;
    width: 125px;
}

我已尝试将无选择 CSS 规则应用于标签，但仍选择单元格并复制文本：/

我该如何做到，当我双击地址时，它只选择地址而不选择标签？

整个代码（来自 Chrome Inspect 元素）：

<table id="addresstable" class="table table-bordered">
<tbody><tr class="hidden-phone gradient"><td><strong>Address</strong></td><td>Label</td><td>Actions</td></tr>
<tr><td class="small">mncFbqoSgv8nEM1nREGTtS6qNwLRYkjV8K</td><td><span class="addresslabel noselect" data-address="mncFbqoSgv8nEM1nREGTtS6qNwLRYkjV8K">Default</span></td><td><a href="javascript:;" class="editaddresslabel btn" data-address="mncFbqoSgv8nEM1nREGTtS6qNwLRYkjV8K"><i class="icon-pencil"></i> Label</a> <a href="javascript:;" class="qrcode btn" data-address="mncFbqoSgv8nEM1nREGTtS6qNwLRYkjV8K" data-original-title=""><i class="icon-qrcode"></i></a></td></tr>
</tbody></table>

【问题讨论】：

能看到整个html表格的代码吗？

标签： javascript css web-applications user-interface

【解决方案1】：

您可能希望确保您的 HTML 格式正确。我在这里为您的示例构建了标记：

http://jsfiddle.net/mchail/fXfsC/1

<table>
    <thead>
        <tr>
            <td>
                Address
            </td>
            <td>
                Label
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                lkjsdflkjsdflkjsdflkjsdfl                
            </td>
            <td>
                Default
            </td>
        </tr>
    </tbody>
</table>

当我双击地址 td 时，它只选择了 td。如果您在验证标记后仍有问题，请发布您的代码，我会看看。

【讨论】：

我讨厌border-collapse: separate。它使表格看起来很奇怪。

【解决方案2】：

我遇到了类似的问题。

不知道为什么会发生 - 显然@mchail jsfiddle 显示一个简单的表应该可以正常工作..

也许它与我使用的玉/哈巴狗有关，或者是有棱角的..

无论哪种方式 - 我只是通过用 div 包装单元格的内容来解决它。
所以我的哈巴狗文件看起来像这样：

table
  tr
    td
      div This is the content
    td something else

当我双击“这是内容”时，就被选中了。

【讨论】：