はみ出たテーブルの列を次の行に表示する
Scrapboxでは、幅の広い表（テーブル）が正しく表示されない
特に、スマホで見るときに困る
はみ出た分はスクロールする方法が一般的だが、別案としてはみ出た列を次の行に送る方法を考えてみたwestantenna.icon
参考
/noratetsu/●横幅の長くなった表をスクロールできるようにする（仮）
テーブルを横スクロールできるようにする
幅が広いとき
https://gyazo.com/834b322a82d81a4db4e2b71f5d04dca6
幅を狭くしたとき
https://gyazo.com/6a486bad3ff4842af74f994895a51374
利点
スクロールすることなく、表の全体が見れる
欠点
列の関係が見にくい
テーブルを派手めに表示するUserCSSと併用すれば、すこしマシになるかもしれない
CSS
色はダークモード用なので、もし使う場合は適宜変える必要あり
.table-block-rowをテーブルではなくdisplay: flexとして扱うことで、はみ出た列は次の行に送られる
margin-bottom: 7px;で行間を空けている
border-bottom: #5a5f6d solid 1px;で下線を引いている
「はみ出たテーブルの列を次の行に表示する」とは直接関係ないが、できるだけ1行に文字数を押し込む工夫
文字を小さくした上でtransform: scale(1, 1.45);で長体に
font-feature-settings: "palt"で、かなをツメる
code:style.css
.indent.table-block-row {
display: flex;
flex-wrap: wrap;
margin-bottom: 7px;
}
.table-block .cell {
display: block-cell;
padding: 5px 0 5px 4px !important;
border-bottom: #5a5f6d solid 1px;
line-height: 15px;
}
.table-block span.cell-text {
font-size: 10.5px;
line-height: 11.5px;
transform: scale(1, 1.45);
font-weight: 400;
font-feature-settings: "palt";
display: inline-block;
}
.table-block .cell:nth-child(2n) {
background-color: #202228;
}
.table-block .cell:nth-child(2n-1) {
background-color: #373b44;
}
UserCSS.icon