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