/public-minaph/Tableを本気で改善するUserCSS

generated at 2/11/2025, 5:55:12 PM
Tableを本気で改善するUserCSS
from settings
Tableを本気で改善するUserCSS

最終的にこんな感じ
フォーカス中の行のポップアップ・スクロール・全幅表示
before擬似要素による行番号・列番号表示
Scrapbox の Content Security Policyから実践例が見れます

テーブルを列ごとにスクロールして、スクロールバーを消すCSS

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のポップアップ（オリジナル）
上のと組み合わせると、ホバーした行が線で囲まれて、画面いっぱいに見えるようになる

開発中の画像
もちろんスクロールも可能

 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（オリジナル）

開発中の画像


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;
}

行ごとのセル数表示
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）
しつこくない程度に色を入れて列の違いをはっきりさせる

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;
 }
 
 */