html - 如何设置表格单元格2种颜色？

Question

如何创建<td>有 2 种颜色？

这是我的代码:

<table cellspacing=0>
   <tr>
    <td bgcolor=green><img src='pic/s.gif' width=8 height=5></td>
    <td bgcolor=#AAAAAA><img src='pic/s.gif' width=72 height=5></td>
    <td style="color: green;">10%</td>
   </tr>
</table>

但我想使用一个 td并在 td 上写下 10%与 z-index=1但我不知道怎么做。

Answer 1

有趣的概念，但您真的需要表格布局吗？

这是一个 FIDDLE方法略有不同。

HTML

<table>
    <tr><td>
            <div class='celldiv'>20%
                <div class='variablediv'></div>
            </div>
        </td></tr>
</table>

CSS

td {
    height: 20px;
    width: 100px;
    padding-left: 30px;
}
.celldiv {
    height: 100%;
    width: 100%;
    background-color: red;
}
.variablediv {
    float: left;
    height: 100%;
    width: 20%;
    background-color: blue;
    margin-right: 5px;
}

并且您可以使用 jQuery 动态更改蓝色的宽度和数字。

只是一个想法。