HTML 表格中的不可选择列
我有一个包含多列的表。我希望单独选择每列的内容。当我开始选择第一列时，第二列、第三列......将自动被选择。当我选择一列时，我想让其他列不可选择。
我尝试在元素上应用以下类，它在 Firefox 中运行良好。无论您从哪里开始选择，它都永远无法选择。
.unselectable {
user-select: none; /* CSS3 */
-moz-user-select: none;
-khtml-user-select: none;
}
对于 IE，我尝试了名为 unselectable="on" 的属性，在 Internet Explorer 中，如果选择从外部开始，它仍然可以选择。我想阻止选择某些列，即使选择是从外部开始的。
我尝试过使用 onselectionstart 和 onmouseover 但由于选择是在元素外部开始的，因此这些不会被触发。
我还有希望吗？
I have a table with multiple columns. I want content of each column to be selected individually. When I start selecting first column, second, third ... are automatically getting selected. When I select one column I want make other columns non selectable.
I have tried applying following class on elements and it worked fine in Firefox. No matter where you start selection from, its never selectable.
.unselectable {
user-select: none; /* CSS3 */
-moz-user-select: none;
-khtml-user-select: none;
}
For IE I have tried property called unselectable="on", In Internet Explorer, it is still selectable if the selection starts outside. I want to prevent selection of certain columns even selection starts from outside.
I have tried using onselectionstart and onmouseover but as the selection is starting outside of element these are not getting triggered.
Do I have any hope ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我相信目前还没有纯粹的 CSS 解决方案。
这可能听起来很奇怪，但您可以将希望用户选择的列的内容克隆到一个单独的表中，该表将
定位：绝对在原始列上。I believe that for now there is no pure CSS solution.
It may sound weird, but you could clone the content of the column you want the user to select into a separate table that will be
positioned: absolutelyover the original column.而不是重新发明轮子...查看 http://www.datatables.net/
这是一个 JQuery会让您大吃一惊的桌面插件。
看起来它已经在做你想做的事情了，而且是免费的。
Instead of reinventing the wheel... check out http://www.datatables.net/
This is a JQuery table plug-in that'll knock your socks off.
It looks like it is already doing what you would like to do and it is free.
包含具有 SCOPE 属性的 TH 可能会有所帮助。不能说它会起作用，但它确实可以形成一个更具语义的表格。 CSS 可以挂钩该属性，因此 DOM 解决方案离我们不远了。
It might help to include a TH with a SCOPE attribute. Can't say it will work, but it does make for a more semantic table. CSS can hook the attribute, so a DOM solution can't be that far off.