はみ出たテーブルの列を次の行に表示する
Scrapboxでは、幅の広い表（テーブル）が正しく表示されない
特に、スマホで見るときに困る
はみ出た分はスクロールする方法が一般的だが、別案としてはみ出た列を次の行に送る方法を考えてみた
参考
幅が広いとき
幅を狭くしたとき
利点
スクロールすることなく、表の全体が見れる
欠点
列の関係が見にくい
テーブルを派手めに表示する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" で、かなをツメる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;
}