テーブルを派手めに表示するUserCSS
テーブルを控えめに表示する版があるのなら、表示する色をもっと派手にする版があってもいいんじゃないかと考えて、作ってみました。suto3.icon
HLSの色相環を一周する順番に色が変わります。
https://gyazo.com/ec77c3c81525f7355a7d93e71887a9e3
↓空白行が必要。
table:test.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
共通部
テーブルの見た目をカスタマイズ とほとんど同じです。
code: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色で一周する版
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) {
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色で一周する版
code: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
UserCSS.icon