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

Question

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

这是我的代码：

<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在z-index=1上写10％，但我不知道如何。

Answer 1

我希望你期待这样的结果......

DEMO JsFiddle

HTML

    <table>
       <tr>
           <td class="red"></td>
           <td class="green"><span class="ten">10%</span></td>
       </tr>
    </table>

<强> CSS

table
{
    border-collapse: collapse;
}
.red
{
    background-color: red;
    width: 10px;
    height: 5px;
}
.green
{
    background-color: green;
    width: 90px;
    height: 5px;
}
.ten
{
    color: #ffffff;
}

Answer 2

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

这是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动态更改蓝色和数字的宽度。

只是一个想法。

Answer 3

我认为你可以做到这一点的最好方法是在photoshop中创建一个图像，然后选择你想要使用的两种颜色并根据需要将它们分开。然后使用代码执行类似的操作：

<table>
    <tr>
        <td style="background-image:url('test/test.jpg');background-size:cover;">
            <table width="100%">
                <tr>
                     <td width="10%">10%</td>
                     <td width="90%">90%</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

希望这有帮助！

Answer 4

您有多种可能性跨浏览器而不是：demo http://codepen.io/anon/pen/zDAof

• 插入阴影，
• 线性渐变 -
• 背景图像
• a mixed or else？

table {
  width:100%;
  height:100px;
}
td {
  background:red;
  padding-left:11%;
}
tr:first-child td {
  box-shadow:inset  10vw 0  0  green
}
tr:nth-child(2) td {
  background:linear-gradient(
    to right, 
    green 0,
    green 10%,
    transparent 10%,
    transparent 100%
  ) red;
}tr:nth-child(3) td {
  background:url(http://dummyimage.com/2000x1/ff0000/ff0000) repeat-y right green;
  background-size:90%;
}
tr:last-child td {
  background:linear-gradient(to right,
    green,
    green 10%,
    red 10%,
    red);
}

html for demo：

<table>
  <tr>
    <td> inset shadow
    </td>
  </tr>
  <tr>
    <td> Linear- gradient + bg color
    </td>
  </tr>
    <tr>
    <td>
      background-image repeat-y
    </td>
  </tr>
  <tr>
    <td>
      linear-gradient
    </td>
  </tr>
</table>