html - html/css - 以可变数量的颜色拆分 td

Question

现在我有一个表，其中 td 可以有单一的背景颜色：

使用以下代码构建：

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

但在特定情况下，我会将 td “拆分”为几种颜色。为此，我尝试在 td 中放置一些 div，每个 div 都有特定的背景颜色。（他们应该占据 td 的所有空间，将其分成相等的部分）

显然它必须是动态的，这意味着处理单色情况和多色情况的代码必须相同。所以如果只有一种颜色，相关的div就必须占据td的整个空间。

我使用了以下代码：

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

（跨度是鼠标悬停时出现的弹出窗口）

然而结果令人失望：

即使只有一个div，也只占用一半的空间。

标签： htmlcsshtml-table

Answer 1

您可以background: repeating-linear-gradient(90deg, #DF0000, #DF0000 50px, #000000 50px, #000000 100px)在 1 个 div（或 td）内使用多种颜色，无需增加难度

#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>