UserCSS:テーブル
↓ 空白行が必要（Scrapbox:セクション）
table:test.csv
A B C
01 001 壱
02 002 弐
03 003 参
table:test.csv
04 004 四
05 005 五
table:a.csv
00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
a b c d e f g h i j k l m n o p
A B C D E F G H I J K L M N O P
参考ページ
customize
/customize/テーブルの見た目をカスタマイズ
/customize/テーブルを控えめに表示する
scrasobox - /scrasobox/テーブルのセルをわかりやすくする
UserCSS:セクション区切り
UserCSS:テーブルを派手めに表示する
code:style.css
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px #cccccc;
/*background-color: rgba(0,0,0,0.1) ;*/
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
border-top: solid 1px #cccccc;
}
/* 1行目を太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
code:stylexx.css
.table-block .cell:nth-child(odd){
background: unset;
/*background-color: rgba(0,0,0,0.02) ;*/
}
.table-block .cell:nth-child(even) {
background: unset;
/*background-color: rgba(0,0,0,0.04) ;*/
}
code:stylexx.css
/*
.table-block .table-block-start {
padding: unset;
font-size: unset;
background-color: unset;
}
.table-block .table-block-start a {
color: unset;
}
*/
/*
.table-block .cell:first-child {
background-color: rgba(0,0,0,0.04) ;
}
*/
/* 1行目を太字、中央揃え */
/*
.section-title + .line .table-block .cell:nth-child(odd) {
font-weight: bolder;
text-align: center;
/*background: unset;*/
/*background-color: blue;*/
/*background-color: rgba(0,0,0,0.04) ;*/
background-color: hsl(0,100%,80%);
}
*/
UserCSS:テーブルを派手めに表示する
code:stylexx.css
.section-title + .line .table-block .cell:nth-child(12n) {
font-weight: bolder;
text-align: center;
background-color: hsl(0,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+1) {
background-color: hsl(30,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+2) {
background-color: hsl(60,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+3) {
background-color: hsl(90,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+4) {
background-color: hsl(120,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+5) {
background-color: hsl(150,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+6) {
background-color: hsl(180,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+7) {
background-color: hsl(210,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+8) {
background-color: hsl(240,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+9) {
background-color: hsl(270,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+10) {
background-color: hsl(300,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+11) {
background-color: hsl(330,100%,80%);
}
.section-title + .line .table-block .cell:nth-child(12n+12) {
background-color: hsl(360,100%,80%);
}
code:style.css
.table-block .cell:nth-child(10n){
background-color: hsla(0,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+1){
background-color: hsla(36,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+2){
background-color: hsla(72,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+3){
background-color: hsla(108,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+4){
background-color: hsla(144,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+5){
background-color: hsla(180,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+6){
background-color: hsla(216,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+7){
background-color: hsla(252,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+8){
background-color: hsla(288,100%,90%,0.4);
}
.table-block .cell:nth-child(10n+9){
background-color: hsla(324,100%,90%,0.4);
}
.section-title + .line .table-block .cell:nth-child(10n) {
font-weight: bolder;
text-align: center;
background-color: hsla(0,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+1) {
background-color: hsla(36,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+2) {
background-color: hsla(72,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+3) {
background-color: hsla(108,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+4) {
background-color: hsla(144,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+5) {
background-color: hsla(180,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+6) {
background-color: hsla(216,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+7) {
background-color: hsla(252,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+8) {
background-color: hsla(288,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(10n+9) {
background-color: hsla(324,100%,80%,0.6);
}
/*
.section-title + .line .table-block .cell:nth-child(10n+10) {
background-color: hsla(360,100%,80%,0.5);
}
*/
code:stylexx.css
/* テーブルのセルをわかりやすくする */
.table-block table { background-color: transparent; border-collapse: separate; border-spacing: 2px }
.table-block table tr td:nth-child(odd) { padding: .1em; background-color: rgba(0,0,0,0.04) }
.table-block table tr:nth-child(even) td { background-color: rgba(0,0,0,0.06) } /* 偶数行を濃くする */
.table-block table tr:first-child td { font-weight: bolder; text-align: center } /* 1行目だけ太字&中央揃え */
.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }
Scrapbox:テーブル
HTML5:テーブル
UserCSS.icon
https://img.shields.io/badge/UserCSS-テーブル-1572B6.svg?logo=css3&style=for-the-badge