如何将div背景拆分为'；n'；带有CSS的色带

我有一个很大的表格，需要将单元格的背景更改为1到6个色带，就像一个矩形叠在一起（其他信息将显示在单元格中）。虽然这个示例是一个表，但我猜这适用于任何DIV。我希望能够（通过动态javascript）在DOM中抓取“cellcontainer”DIV并创建子DIV以创建带状背景效果

<table border=1 width=400 height=400>
    <tr>
        <td>
            <div class="cellcontainer">
                One
            </div>
        </td>
        <td>Two</td>
    </tr>
    <tr>
        <td>Three</td>
        <td>Four</td>
    </tr>
</table>

一个
两个
三
四

---

对于这个简单的表格，我尝试使用第一个单元格（带有div'cellcontainer'），并将背景设置为三种不同的颜色，如浅蓝色、黄色和绿色。我尝试过添加高度为33%的children div，并将cellcontainer的样式设置为relative，将children div设置为absolute，等等。但我还没有找到神奇的组合。

当你说要将单元格的背景设置为3种不同的颜色时，你是指渐变吗？如果是的话，试试看

---

否则我不太清楚你所说的“使背景3种不同的颜色”是什么意思。

你发现了什么非魔法组合？（像这样的问题就像‘为我做’）这完全取决于你想做什么。如果这三个“色带”是作为不同类型数据的容器（我从您的“和其他信息”中收集的），您应该将它们设置为表格单元格！否则，是的，是线性渐变。这些将是表格单元格，每个单元格都有一个具有唯一ID的DIV。不是渐变，而是背景色的“n”色带。糟糕的模拟示例：哦，进一步用rowspan细分表格单元格或在单元格中嵌入另一个表格会干扰正常单元格数据的显示。我使用我提供的站点进行了此操作，并将其以非渐变样式拆分为您所述的3种颜色。试试这个：背景：线性梯度（顶部，#31eff9 33%，#edff30 33%，#edff30 66%，#00c100 66%）；Lodder，这是一个很好的建议，我确实使用了渐变，但正如你所知，不同浏览器对渐变的支持不一致，我根本无法在iPhone或Android浏览器上使用渐变（好吧，只是部分在Firefox上，而不是内置浏览器或Chrome上）。是否有任何方法可以将表格单元格细分为堆叠的div或跨浏览器支持的内容？