Невыбираемые столбцы в таблице 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

Вместо того, чтобы изобретать велосипед ... проверьте http://www.datatables.net/

Это плагин для таблицы JQuery, который выбьет ваши носки.

Похоже, что он уже делает то, что вы хотели бы сделать, и это бесплатно.

Answer 2

Я считаю, что пока нет чистого решения CSS.

Это может звучать странно, но вы можете клонировать содержимое столбца, который вы хотите, чтобы пользователь выбрал, в отдельную таблицу, которая будет positioned: absolutely поверх исходного столбца.

Answer 3

Может быть полезно включить TH с атрибутом SCOPE. Не могу сказать, что это будет работать, но это делает для более семантической таблицы. CSS может перехватить атрибут, поэтому DOM-решение не может быть таким уж далеко.