thタグのborderにホバー時のCSSを適用させたい

Question

現在、マウスのドラッグ操作による幅調整可能なテーブルをvanillaJSで作らなければいけない都合があります。

そこで、シンプルにtableタグを利用して作成しようとしているのですが、thタグのボーダー部分にホバーした際のcursorプロパティの指定ができず、悩んでいます。

境界部分に別タグを追加し、その要素に対してセレクタを当てるというのは思い付きますが、シンプルじゃないのでやりたくないです。

また、IE対応させなければいけないのでresizeプロパティも使えません。。

実現方法をご存知の方がおりましたら、ご教授頂けると幸いです。

Comments

[miyabi_pudding]

現状のHTML、CSSを質問に記載してください。

Answer 1

pointer-events を制御することでできますが、入力欄などがある場合は気を付けてください。

th {
  position: relative;
  pointer-events: none;
  cursor: col-resize;
}

th:before,
th:after {
  content: '';
  display: inline-block;
  width: 3px;
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: auto;
}

th:before {
  left: -2px;
}

th:after {
  right: -2px;
}

https://stackoverflow.com/questions/26426734/cursorpointer-on-pseudo-element-ie

Comments

[kura_4869]

ご回答ありがとうございます。

まさに頂きたい回答でした。
このようなCSSの使い方があることは全く思いつきませんで、、ありがとうございます。

Answer 2

適当なライブラリを探すのではなく、自分で作らなくてはいけないのでしょうか？

たとえばjQuery Resizable Columnsとか

Comments

[kura_4869]

ご回答ありがとうございます。

今回は負荷の高いページをIE向けに構築せねばならず、無駄な処理は全て省く必要があるため、０から製造する必要がありプラグインは除外しています。