/customize/テーブルを派手めに表示するUserCSS

generated at 10/17/2024, 3:20:08 AM
テーブルを派手めに表示するUserCSS
テーブルを控えめに表示する版があるのなら、表示する色をもっと派手にする版があってもいいんじゃないかと考えて、作ってみました。
HLSの色相環を一周する順番に色が変わります。


↓空白行が必要。

test.csv00010203040506070809101112131415
abcdefghijklmnop
ABCDEFGHIJKLMNOP

共通部
テーブルの見た目をカスタマイズ とほとんど同じです。
style.css.table-block .cell {
	border-right: solid 1px #cccccc;
	border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
	border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
	border-top: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
	font-weight: bolder;
	text-align: center;
}

10色で一周する版
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) {
  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);
}

12色で一周する版
stylexx.css.table-block .cell:nth-child(12n){
  background-color: hsla(0,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+1){
  background-color: hsla(30,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+2){
  background-color: hsla(60,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+3){
  background-color: hsla(90,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+4){
  background-color: hsla(120,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+5){
  background-color: hsla(150,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+6){
  background-color: hsla(180,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+7){
  background-color: hsla(210,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+8){
  background-color: hsla(240,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+9){
  background-color: hsla(270,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+10){
  background-color: hsla(300,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+11){
  background-color: hsla(330,100%,90%,0.4);
}
.section-title + .line .table-block .cell:nth-child(12n) {
  background-color: hsla(0,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+1) {
  background-color: hsla(30,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+2) {
  background-color: hsla(60,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+3) {
  background-color: hsla(90,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+4) {
  background-color: hsla(120,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+5) {
  background-color: hsla(150,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+6) {
  background-color: hsla(180,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+7) {
  background-color: hsla(210,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+8) {
  background-color: hsla(240,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+9) {
  background-color: hsla(270,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+10) {
  background-color: hsla(300,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+11) {
  background-color: hsla(330,100%,80%,0.6);
}

#テーブル
#UserCSS