Tableを本気で改善するUserCSS
from settings
Tableを本気で改善するUserCSS
最終的にこんな感じ
https://scrapbox.io/files/612b9effa9d323001d667f9a.png
フォーカス中の行のポップアップ・スクロール・全幅表示
before擬似要素による行番号・列番号表示
Scrapbox の Content Security Policyから実践例が見れます
テーブルを列ごとにスクロールして、スクロールバーを消すCSS
code:style.css
.indent.table-block-row {
overflow-x: auto;
overflow-y: hidden;
/* IE, Edge */
-ms-overflow-style: none;
/* Firefox */
scrollbar-width: none;
}
.indent.table-block-row::-webkit-scrollbar {
display:none;
}
参考
Scroll barを消す方法 - seeknext.co.jp
/noratetsu/●横幅の長くなった表をスクロールできるようにする（仮）
テーブルrowのポップアップ（オリジナル）
上のと組み合わせると、ホバーした行が線で囲まれて、画面いっぱいに見えるようになる
開発中の画像
https://scrapbox.io/files/612a9ebcb0cd8a001d36196b.png
もちろんスクロールも可能
code: style.css
.indent.table-block-row:is(:hover, :focus-within, .cursor-row) {
background-color: rgba(255,255,255,0.03);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border: solid 1px rgba(255,255,255,0.2);
box-shadow: 3px 3px 2px rgba(0,0,0,0.2);
border-radius: 3px;
z-index: 99;
display: block;
position: relative;
margin-left: calc(-21px + 50% - 50vw) !important;
padding-left: calc(21px - 50% + 50vw);
padding-right: 100vw;
width: 105vw;
}
テーブル内のセル位置を表示するCSS（オリジナル）
開発中の画像
https://scrapbox.io/files/612aaa82c31a72001d665b34.png
code:style.css
.indent.table-block-row .cell:hover::before {
content: counter(row) " | " counter(cell);
text-align: center;
font-size: 6px;
position: relative;
margin: 0 20px 0 -60px;
padding: 4px;
line-height: 1.2;
width: 40px;
border-radius: 3px;
display: inline-block;
z-index: 999999999;
background: var(--page-text-color, #444);
color: var(--page-bg, #ffffff);
}
.indent.table-block-row:is(:hover, :focus-within) .cell {
border: solid 1px rgba(255,255,255,0.5);
counter-increment: cell;
}
.indent.table-block-row {
counter-reset: cell;
counter-increment: cell;
}
.indent.table-block-row .cell:first-child {
counter-increment: row;
}
.section-title {
counter-reset: row;
}
行ごとのセル数表示
code:style.css
/*
.indent.table-block-row .cell:last-child::before {
content: counter(cell);
position: absolute;
right: -20px;
color: var(--white-strong);
font-weight: bold;
font-size: 1.2em;
}
*/
テーブルのカラーリング調整（deprecated）
しつこくない程度に色を入れて列の違いをはっきりさせる
code:style.css
/*
.line .table-block .cell:nth-child(odd) {
background-color: rgba(220, 250, 250, 0.2);
}
.line .table-block .cell:nth-child(even) {
background-color: rgba(220, 250, 250, 0.3);
}
.section-title + .line .table-block .cell:nth-child(odd) {
background-color: rgba(220, 250, 250, 0.5);
}
.section-title + .line .table-block .cell:nth-child(even) {
background-color: rgba(220, 250, 250, 0.7);
}
.indent.table-block-row .cell{
border-left: solid 1px rgba(255, 255, 255, 0.2);
border-right: solid 1px rgba(255, 255, 255, 0.2);
}
.indent.table-block-row .cell:hover::before {
background-color: rgba(255,255,255,0.5);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border: solid 1px rgba(0,0,0,0.3);
color: rgba(0, 0, 0, 0.6) !important;
}
*/