/suto3/UserCSS:テーブル

generated at 11/17/2024, 10:58:31 AM
UserCSS:テーブル
↓ 空白行が必要（Scrapbox:セクション）

test.csvABC 
01 001壱
02002弐
03 003参
test.csv04004四
05005五

a.csv00010203040506070809101112131415
abcdefghijklmnop
ABCDEFGHIJKLMNOP

参考ページ
customize 
/customize/テーブルの見た目をカスタマイズ
/customize/テーブルを控えめに表示する
scrasobox - /scrasobox/テーブルのセルをわかりやすくする
UserCSS:セクション区切り
UserCSS:テーブルを派手めに表示する

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

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

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:テーブルを派手めに表示する

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

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

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:テーブル
A	B	C
01	001	壱
02	002	弐
03	003	参
04	004	四
05	005	五