html / css - разделить тд на переменное количество цветов

Question

Прямо сейчас у меня есть таблица, где у тд может быть один цвет фона:

построен со следующим кодом:

<td colspan="1" style="background: cyan; position:relative;" ><span class="CellComment" class="smallCell">Version 1.0</td>

Но в определенных случаях я бы «разделил» тд на несколько цветов. Чтобы сделать это, я попытался поместить число div в тд, каждый с определенным цветом фона. (они должны занимать все пространство тд, разбивая его на равные части)

Очевидно, что он должен быть динамическим, то есть код, который обрабатывает одноцветный регистр и многоцветный регистр, должен быть одинаковым. Поэтому, если есть только один цвет, связанный div должен занимать все пространство тд.

Я использовал следующий код:

<td colspan="1"><div style="background-color:cyan; position:absolute;"></div><span class="CellComment" class="smallCell">Version 1.0</td>

(span - всплывающее окно, которое появляется при наведении мыши)

Тем не менее результат разочаровывает:

и даже если есть только один div, он занимает только половину пространства.

Answer 1

Вы можете использовать background: repeating-linear-gradient(90deg, #DF0000, #DF0000 50px, #000000 50px, #000000 100px), чтобы иметь несколько цветов внутри 1 деления (или тд), не нужно усложнять его

#normal{
 background-color: black;
}
#split {
  background: repeating-linear-gradient(90deg, #DF0000, #DF0000 50px, #000000 50px, #000000 100px)
}
#split3{
background: repeating-linear-gradient(90deg,#DF0000, #DF0000 33px,#4286f4 33px, #4286f4 66px,#000000 66px, #000000 100px)
}
div{
  width: 100px;
  height: 100px;
  margin: 10px;
  float: left;
}

<div id="normal">
</div>
<div id="split">
</div>
<div id="split3">
</div>