Colour Lists - is there a better way?

In TiddlyWiki I had a tiddler:

I have created a similar one in obsidian, is there a way to get rid of the empty top row (I don’t want to sort it) and maybe reduce the padding a bit. to make it look better?

|                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |
| ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- | ------------------------------------------------------- |
| <p style="background-color: #FFF; color: black">FFF</p> | <p style="background-color: #CCC; color: black">CCC</p> | <p style="background-color: #999; color: black">999</p> | <p style="background-color: #666; color: white">666</p> | <p style="background-color: #333; color: white">333</p> | <p style="background-color: #000; color: white">000</p> | <p style="background-color: #FC0; color: black">FC0</p> | <p style="background-color: #F90; color: black">F90</p> | <p style="background-color: #F60; color: white">F60</p> | <p style="background-color: #F30; color: white">F30</p> |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |
| <p style="background-color: #9C0; color: black">9C0</p> |                                                         |                                                         |                                                         |                                                         | <p style="background-color: #C90; color: black">C90</p> | <p style="background-color: #FC3; color: black">FC3</p> | <p style="background-color: #FC6; color: black">FC6</p> | <p style="background-color: #F96; color: black">F96</p> | <p style="background-color: #F63; color: white">F63</p> | <p style="background-color: #C30; color: white">C30</p> |                                                         |                                                         |                                                         |                                                         | <p style="background-color: #C03; color: white">C03</p> |
| <p style="background-color: #CF0; color: black">CF0</p> | <p style="background-color: #CF3; color: black">CF3</p> | <p style="background-color: #330; color: white">330</p> | <p style="background-color: #660; color: white">660</p> | <p style="background-color: #990; color: black">990</p> | <p style="background-color: #CC0; color: black">CC0</p> | <p style="background-color: #FF0; color: black">FF0</p> | <p style="background-color: #C93; color: black">C93</p> | <p style="background-color: #C63; color: white">C63</p> | <p style="background-color: #300; color: white">300</p> | <p style="background-color: #600; color: white">600</p> | <p style="background-color: #900; color: white">900</p> | <p style="background-color: #C00; color: white">C00</p> | <p style="background-color: #F00; color: white">F00</p> | <p style="background-color: #F36; color: white">F36</p> | <p style="background-color: #F03; color: white">F03</p> |
| <p style="background-color: #9F0; color: black">9F0</p> | <p style="background-color: #CF6; color: black">CF6</p> | <p style="background-color: #9C3; color: black">9C3</p> | <p style="background-color: #663; color: white">663</p> | <p style="background-color: #993; color: black">993</p> | <p style="background-color: #CC3; color: black">CC3</p> | <p style="background-color: #FF3; color: black">FF3</p> | <p style="background-color: #960; color: white">960</p> | <p style="background-color: #930; color: white">930</p> | <p style="background-color: #633; color: white">633</p> | <p style="background-color: #933; color: white">933</p> | <p style="background-color: #C33; color: white">C33</p> | <p style="background-color: #F33; color: white">F33</p> | <p style="background-color: #C36; color: white">C36</p> | <p style="background-color: #F69; color: white">F69</p> | <p style="background-color: #F06; color: white">F06</p> |
| <p style="background-color: #6F0; color: black">6F0</p> | <p style="background-color: #9F6; color: black">9F6</p> | <p style="background-color: #6C3; color: black">6C3</p> | <p style="background-color: #690; color: black">690</p> | <p style="background-color: #996; color: black">996</p> | <p style="background-color: #CC6; color: black">CC6</p> | <p style="background-color: #FF6; color: black">FF6</p> | <p style="background-color: #963; color: white">963</p> | <p style="background-color: #630; color: white">630</p> | <p style="background-color: #966; color: white">966</p> | <p style="background-color: #C66; color: white">C66</p> | <p style="background-color: #F66; color: white">F66</p> | <p style="background-color: #903; color: white">903</p> | <p style="background-color: #C39; color: white">C39</p> | <p style="background-color: #F6C; color: white">F6C</p> | <p style="background-color: #F09; color: white">F09</p> |
| <p style="background-color: #3F0; color: black">3F0</p> | <p style="background-color: #6F3; color: black">6F3</p> | <p style="background-color: #390; color: black">390</p> | <p style="background-color: #6C0; color: black">6C0</p> | <p style="background-color: #9F3; color: black">9F3</p> | <p style="background-color: #CC9; color: black">CC9</p> | <p style="background-color: #FF9; color: black">FF9</p> | <p style="background-color: #C96; color: black">C96</p> | <p style="background-color: #C60; color: white">C60</p> | <p style="background-color: #C99; color: black">C99</p> | <p style="background-color: #F99; color: black">F99</p> | <p style="background-color: #F39; color: white">F39</p> | <p style="background-color: #C06; color: white">C06</p> | <p style="background-color: #906; color: white">906</p> | <p style="background-color: #F3C; color: white">F3C</p> | <p style="background-color: #F0C; color: white">F0C</p> |
| <p style="background-color: #0C0; color: black">0C0</p> | <p style="background-color: #3C0; color: black">3C0</p> | <p style="background-color: #360; color: white">360</p> | <p style="background-color: #693; color: black">693</p> | <p style="background-color: #9C6; color: black">9C6</p> | <p style="background-color: #CF9; color: black">CF9</p> | <p style="background-color: #FFC; color: black">FFC</p> | <p style="background-color: #FC9; color: black">FC9</p> | <p style="background-color: #F93; color: black">F93</p> | <p style="background-color: #FCC; color: black">FCC</p> | <p style="background-color: #F9C; color: black">F9C</p> | <p style="background-color: #C69; color: white">C69</p> | <p style="background-color: #936; color: white">936</p> | <p style="background-color: #603; color: white">603</p> | <p style="background-color: #C09; color: white">C09</p> | <p style="background-color: #303; color: white">303</p> |
| <p style="background-color: #3C3; color: black">3C3</p> | <p style="background-color: #6C6; color: black">6C6</p> | <p style="background-color: #0F0; color: black">0F0</p> | <p style="background-color: #3F3; color: black">3F3</p> | <p style="background-color: #6F6; color: black">6F6</p> | <p style="background-color: #9F9; color: black">9F9</p> | <p style="background-color: #CFC; color: black">CFC</p> |                                                         |                                                         |                                                         | <p style="background-color: #C9C; color: black">C9C</p> | <p style="background-color: #969; color: white">969</p> | <p style="background-color: #939; color: white">939</p> | <p style="background-color: #909; color: white">909</p> | <p style="background-color: #636; color: white">636</p> | <p style="background-color: #606; color: white">606</p> |
| <p style="background-color: #060; color: white">060</p> | <p style="background-color: #363; color: white">363</p> | <p style="background-color: #090; color: black">090</p> | <p style="background-color: #393; color: black">393</p> | <p style="background-color: #696; color: black">696</p> | <p style="background-color: #9C9; color: black">9C9</p> |                                                         |                                                         |                                                         | <p style="background-color: #FCF; color: black">FCF</p> | <p style="background-color: #F9F; color: black">F9F</p> | <p style="background-color: #F6F; color: white">F6F</p> | <p style="background-color: #F3F; color: white">F3F</p> | <p style="background-color: #F0F; color: white">F0F</p> | <p style="background-color: #C6C; color: white">C6C</p> | <p style="background-color: #C3C; color: white">C3C</p> |
| <p style="background-color: #030; color: white">030</p> | <p style="background-color: #0C3; color: black">0C3</p> | <p style="background-color: #063; color: white">063</p> | <p style="background-color: #396; color: black">396</p> | <p style="background-color: #6C9; color: black">6C9</p> | <p style="background-color: #9FC; color: black">9FC</p> | <p style="background-color: #CFF; color: black">CFF</p> | <p style="background-color: #39F; color: black">39F</p> | <p style="background-color: #9CF; color: black">9CF</p> | <p style="background-color: #CCF; color: black">CCF</p> | <p style="background-color: #C9F; color: black">C9F</p> | <p style="background-color: #96C; color: white">96C</p> | <p style="background-color: #639; color: white">639</p> | <p style="background-color: #306; color: white">306</p> | <p style="background-color: #90C; color: white">90C</p> | <p style="background-color: #C0C; color: white">C0C</p> |
| <p style="background-color: #0F3; color: black">0F3</p> | <p style="background-color: #3F6; color: black">3F6</p> | <p style="background-color: #093; color: black">093</p> | <p style="background-color: #0C6; color: black">0C6</p> | <p style="background-color: #3F9; color: black">3F9</p> | <p style="background-color: #9FF; color: black">9FF</p> | <p style="background-color: #9CC; color: black">9CC</p> | <p style="background-color: #06C; color: white">06C</p> | <p style="background-color: #69C; color: black">69C</p> | <p style="background-color: #99F; color: black">99F</p> | <p style="background-color: #99C; color: black">99C</p> | <p style="background-color: #93F; color: white">93F</p> | <p style="background-color: #60C; color: white">60C</p> | <p style="background-color: #609; color: white">609</p> | <p style="background-color: #C3F; color: white">C3F</p> | <p style="background-color: #C0F; color: white">C0F</p> |
| <p style="background-color: #0F6; color: black">0F6</p> | <p style="background-color: #6F9; color: black">6F9</p> | <p style="background-color: #3C6; color: black">3C6</p> | <p style="background-color: #096; color: black">096</p> | <p style="background-color: #6FF; color: black">6FF</p> | <p style="background-color: #6CC; color: black">6CC</p> | <p style="background-color: #699; color: black">699</p> | <p style="background-color: #036; color: white">036</p> | <p style="background-color: #369; color: white">369</p> | <p style="background-color: #66F; color: white">66F</p> | <p style="background-color: #66C; color: white">66C</p> | <p style="background-color: #669; color: white">669</p> | <p style="background-color: #309; color: white">309</p> | <p style="background-color: #93C; color: white">93C</p> | <p style="background-color: #C6F; color: white">C6F</p> | <p style="background-color: #90F; color: white">90F</p> |
| <p style="background-color: #0F9; color: black">0F9</p> | <p style="background-color: #6FC; color: black">6FC</p> | <p style="background-color: #3C9; color: black">3C9</p> | <p style="background-color: #3FF; color: black">3FF</p> | <p style="background-color: #3CC; color: black">3CC</p> | <p style="background-color: #399; color: black">399</p> | <p style="background-color: #366; color: white">366</p> | <p style="background-color: #069; color: white">069</p> | <p style="background-color: #039; color: white">039</p> | <p style="background-color: #33F; color: white">33F</p> | <p style="background-color: #33C; color: white">33C</p> | <p style="background-color: #339; color: white">339</p> | <p style="background-color: #336; color: white">336</p> | <p style="background-color: #63C; color: white">63C</p> | <p style="background-color: #96F; color: white">96F</p> | <p style="background-color: #60F; color: white">60F</p> |
| <p style="background-color: #0FC; color: black">0FC</p> | <p style="background-color: #3FC; color: black">3FC</p> | <p style="background-color: #0FF; color: black">0FF</p> | <p style="background-color: #0CC; color: black">0CC</p> | <p style="background-color: #099; color: black">099</p> | <p style="background-color: #066; color: white">066</p> | <p style="background-color: #033; color: white">033</p> | <p style="background-color: #39C; color: black">39C</p> | <p style="background-color: #36C; color: white">36C</p> | <p style="background-color: #00F; color: white">00F</p> | <p style="background-color: #00C; color: white">00C</p> | <p style="background-color: #009; color: white">009</p> | <p style="background-color: #006; color: white">006</p> | <p style="background-color: #003; color: white">003</p> | <p style="background-color: #63F; color: white">63F</p> | <p style="background-color: #30F; color: white">30F</p> |
| <p style="background-color: #0C9; color: black">0C9</p> |                                                         |                                                         |                                                         |                                                         | <p style="background-color: #09C; color: black">09C</p> | <p style="background-color: #3CF; color: black">3CF</p> | <p style="background-color: #6CF; color: black">6CF</p> | <p style="background-color: #69F; color: black">69F</p> | <p style="background-color: #36F; color: white">36F</p> | <p style="background-color: #03C; color: white">03C</p> |                                                         |                                                         |                                                         |                                                         | <p style="background-color: #30C; color: white">30C</p> |
|                                                         |                                                         |                                                         |                                                         |                                                         |                                                         | <p style="background-color: #0CF; color: black">0CF</p> | <p style="background-color: #09F; color: black">09F</p> | <p style="background-color: #06F; color: white">06F</p> | <p style="background-color: #03F; color: white">03F</p> |                                                         |                                                         |                                                         |                                                         |                                                         |                                                         |

I found CSS snippets and after some experimentation I ended up with something I am happier with:

Screenshot 2022-05-22 at 16.44.05

/* -------------------------------------------------------------------- */
/* colourChart                                                          */
/* -------------------------------------------------------------------- */
.colourChart table td {
  border:           1px solid white;
  background:       white;
  padding:          0 0;            
  text-align:       center;
}

.colourChart table th {
  border:           0;
  background:       white;
  padding:          1px 0;  
  text-align:       center;
}

.colourChart table p {
  padding:          1px 1px;
  text-align:       center;
  margin:           0 auto; 
}
/* -------------------------------------------------------------------- */

Top part of the similar reference list:

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.