HTML 表格中不可选择的列答案

【问题标题】：Non-selectable columns in HTML tableHTML 表格中不可选择的列
【发布时间】：2011-10-02 16:55:21
【问题描述】：

我有一个包含多列的表。我希望单独选择每列的内容。当我开始选择第一列时，第二列、第三列……会自动被选中。当我选择一列时，我想让其他列不可选。

我尝试在元素上应用以下类，它在 FF 中运行良好。无论你从哪里开始选择，它永远不会选择。

.unselectable {
    user-select: none; /* CSS3 */
    -moz-user-select: none;
    -khtml-user-select: none;
}

对于 IE，我尝试了名为 unselectable="on" 的属性，在 Internet Explorer 中，如果选择从外部开始，它仍然是可选的。我想阻止选择某些列，即使选择是从外部开始的。

我尝试过使用 onselectionstart 和 onmouseover，但由于选择是在元素之外开始的，因此这些不会被触发。

我还有希望吗？

提前致谢。

【问题讨论】：

单独选择每一列的目的是什么？我创建了一个表格，里面有一些文本，我选择了文本而没有遇到您的问题。另外，您能否提供更多详细信息来说明为什么会出现此问题？您能否给我们一个 sn-p 或您的所有代码，以便我们对其进行测试？
您最好的选择可能是通过 jquery（简单而干净的选择器）选择表格单元格并设置相应的 css 类以更改行为。您可能想改用样式属性，因此这些属性不能被浏览器中的自定义用户 css 文件覆盖。

【解决方案1】：

我相信目前还没有纯 CSS 解决方案。

这听起来可能很奇怪，但您可以将您希望用户选择的列的内容克隆到一个单独的表中，该表将在原始列上为 positioned: absolutely。

【讨论】：

【解决方案2】：

与其重新发明轮子...查看http://www.datatables.net/

这是一个让您大吃一惊的 JQuery 表插件。

它看起来已经在做你想做的事情而且它是免费的。

【讨论】：

【解决方案3】：

包含一个带有 SCOPE 属性的 TH 可能会有所帮助。不能说它会起作用，但它确实使表格更具语义。 CSS 可以挂钩属性，因此 DOM 解决方案不会那么遥远。

【讨论】：