-
widgetについて
トピックス by
146 pt
2024年2月19日 17:22
125
PV
お世話になっております。
【ランキングを入れた比較表(表)】のWidgetについてお伺いさせていただきたいです。
添付画像のように、オレンジ色がけの項目の上下の線がないものがあり、すべてある状態にしたいのですが、方法についてご教示いただけますでしょうか？？
-
22 コメント
-
ご相談ありがとうございます！
かしこまりました！
それでは該当ページのプレビューの共有お願いします！
-
お願いします！
-
ありがとうございます！
かしこまりました💪
-
確認したところ、添付画像の箇所がないようでした🤔
再度確認お願いします🙇♀️
https://t.gyazo.com/teams/squadbeyond/5b9898a86950cf586644eee3bb6c2438.png
-
失礼いたしました。こちらのリンクから確認できますでしょうか？？
-
お伺いしたい内容を変更させていただきたいのですが、上記リンク内の添付画像のランキング表付近の線が、スクロールすると色が重なる部分があり、色を重ねない形にしたいのですが、修正方法についてご教示いただけますでしょうか？？
-
共有ありがとうございます！
確認できました！
-
下記CSSの調整でいかがでしょうか？
[ 修正前 ]
.tbl-sticky table th { width: 12%; position: -webkit-sticky; position: sticky; left: 0; z-index: 10; border-left: 1px solid 000; border-bottom: 1px solid #000; background-color: #EDFDE6; }[ 修正後 ]
.tbl-sticky table th { width: 12%; position: -webkit-sticky; position: sticky; left: 0; z-index: 10; border-left: 1px solid #000; /* 修正 */ border-bottom: 1px solid #000; background-color: #EDFDE6; }ご確認お願いします！
-
ありがとうございます。まず、上記のCSSがWidget内のCSSに見つからず、タグ設定（JavaScript head）内に見つかり、修正したのですが、直りませんでした、、
-
なるほどですね🤔
修正後のページを共有していただきたいです！
-
ありがとうございます！
確認します！
-
確認しました！
テーブルセルの間隔を指定するプロパティ のborder-collapse の値が separate ( ボーダーラインを離して表示 )になっているために問題が起こっていそうです。
下記 CSS の調整でいかがでしょうか？
.tbl-sticky table { /* 表の横幅（記事幅を超える部分は横スクロール） */ width: 900px; table-layout: fixed; border-collapse: collapse; /* separate を collapseに変更 */ border-spacing: 0; border-top: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; }
