HTML表格中的不可选列

Question

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

我尝试在元素上应用以下类，它在FF中工作正常。无论你从哪里开始选择，它都永远不可选择。

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

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

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

我有希望吗？

提前致谢。

Answer 1

我认为目前还没有纯CSS解决方案。

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

Answer 2

不要重新发明轮子......请查看http://www.datatables.net/

这是一个JQuery表插件，可以让你失望。

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

Answer 3

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