質問編集履歴
5
詳しく
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
tableの列固定して横スクロールをさせたい時にposition: sticky;を使うと思いますが、列を左にスクロールした時に一番左の列の縦線がなくなり右の列が後ろを移動しているのが見えます。これを見えないようにするために空の疑似要素を使って左の列にborderを設定するのですが、ここで問題が生じました。
|
|
1
|
+
tableの左1列を固定して横スクロールをさせたい時にposition: sticky;を使うと思いますが、列を左にスクロールした時に一番左の列の縦線がなくなり右の列が後ろを移動しているのが見えます。これを見えないようにするために空の疑似要素を使って左の列にborderを設定するのですが、ここで問題が生じました。
|
|
2
2
|
一番左の列には文字にa hrefでリンクを張っています。疑似要素を使用するとその文字のリンクがクリックできなくなってしまうのです。
|
|
3
3
|
|
|
4
4
|
リンクをクリックできるようにするために、疑似要素を使わないようにjavascriptを使用してdiv要素を作り、これを棒状にしてborderの代わりとして使用しようと思い、下記コードでtableのtopとleftを取得して、そこからborderのtopとleftとheightを求めて設置しようと思ったのですがtableのtopとleftが正確に取得できず、棒上のdivがずれて表示されたりします。特にwordpress内だとずれます。
|
4
もうちょい詳しく
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
tableの列固定を
|
|
1
|
+
tableの列固定して横スクロールをさせたい時にposition: sticky;を使うと思いますが、列を左にスクロールした時に一番左の列の縦線がなくなり右の列が後ろを移動しているのが見えます。これを見えないようにするために空の疑似要素を使って左の列にborderを設定するのですが、ここで問題が生じました。
|
|
2
2
|
一番左の列には文字にa hrefでリンクを張っています。疑似要素を使用するとその文字のリンクがクリックできなくなってしまうのです。
|
|
3
3
|
|
|
4
4
|
リンクをクリックできるようにするために、疑似要素を使わないようにjavascriptを使用してdiv要素を作り、これを棒状にしてborderの代わりとして使用しようと思い、下記コードでtableのtopとleftを取得して、そこからborderのtopとleftとheightを求めて設置しようと思ったのですがtableのtopとleftが正確に取得できず、棒上のdivがずれて表示されたりします。特にwordpress内だとずれます。
|
3
言い回しが違う
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
tableの列固定をするときにposition: sticky;を使うと思いますが、
|
|
1
|
+
tableの列固定をするときにposition: sticky;を使うと思いますが、列を左にスクロールした時に一番左の列の縦線がなくなり右の列が後ろを移動しているのが見えます。これを見えないようにするために空の疑似要素を使って左の列にborderを設定するのですが、ここで問題が生じました。
|
|
2
2
|
一番左の列には文字にa hrefでリンクを張っています。疑似要素を使用するとその文字のリンクがクリックできなくなってしまうのです。
|
|
3
3
|
|
|
4
4
|
リンクをクリックできるようにするために、疑似要素を使わないようにjavascriptを使用してdiv要素を作り、これを棒状にしてborderの代わりとして使用しようと思い、下記コードでtableのtopとleftを取得して、そこからborderのtopとleftとheightを求めて設置しようと思ったのですがtableのtopとleftが正確に取得できず、棒上のdivがずれて表示されたりします。特にwordpress内だとずれます。
|
2
自分がやったことを書く
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
tableの列固定をするときにposition: sticky;を使うと思いますが、その列を左にスクロールした時に一番左の列の縦線がなくなり右の列が後ろを移動しているのが見えます。これを見えないようにするために空の疑似要素を使って左の列にborderを設定するのですが、ここで問題が生じました。
|
|
2
2
|
一番左の列には文字にa hrefでリンクを張っています。疑似要素を使用するとその文字のリンクがクリックできなくなってしまうのです。
|
|
3
3
|
|
|
4
|
-
javascriptを使用してdiv要素を作り、これを棒状にしてborderとして使用しようと思い、下記コードでtableのtopとleftを取得して、そこからborderのtopとleftとheightを求めて設置しようと思ったのですがtableのtopとleftが正確に取得できず、棒上のdivがずれて表示されたりします。特にwordpress内だとずれます。
|
|
4
|
+
リンクをクリックできるようにするために、疑似要素を使わないようにjavascriptを使用してdiv要素を作り、これを棒状にしてborderの代わりとして使用しようと思い、下記コードでtableのtopとleftを取得して、そこからborderのtopとleftとheightを求めて設置しようと思ったのですがtableのtopとleftが正確に取得できず、棒上のdivがずれて表示されたりします。特にwordpress内だとずれます。
|
|
5
5
|
```javascript
|
|
6
6
|
var top = document.querySelector("#example table").getBoundingClientRect().top;
|
|
7
7
|
var left = document.querySelector("#example table").getBoundingClientRect().left;
|
1
誤字です
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
tableの列固定をするときにposition: sticky;を使うと思いますが、その列を左にスクロールした時に一番左の列の縦線がなくなり右の列が後ろを移動しているのが見えます。これを見えないようにするために空の疑似要素を使って左の列にborderを設定するのですが、ここで問題が生じました。
|
|
2
2
|
一番左の列には文字にa hrefでリンクを張っています。疑似要素を使用するとその文字のリンクがクリックできなくなってしまうのです。
|
|
3
3
|
|
|
4
|
-
javascriptを使用してdiv要素を作り、これを棒状にしてborderとして使用しようと思い、下記コードでtableのtopとleftを取得して、そこからborderのtopとleft
|
|
4
|
+
javascriptを使用してdiv要素を作り、これを棒状にしてborderとして使用しようと思い、下記コードでtableのtopとleftを取得して、そこからborderのtopとleftとheightを求めて設置しようと思ったのですがtableのtopとleftが正確に取得できず、棒上のdivがずれて表示されたりします。特にwordpress内だとずれます。
|
|
5
5
|
```javascript
|
|
6
6
|
var top = document.querySelector("#example table").getBoundingClientRect().top;
|
|
7
7
|
var left = document.querySelector("#example table").getBoundingClientRect().left;
|